如何使浮動 div 動態擴展以占用最大空間？

Question

我有 3 個浮動的左側對象，左側的對象會一直改變大小。 右邊的尺寸總是固定的。 我想填充兩個外部 div 之間的空間。 但現在這行不通。 如果我將中心 div 的寬度設置為 100%，它會變得太大。

不知道應該如何處理。

編輯：代碼示例

<div style="width:1000px">
  <div style="float:left;">1</div>
  <div style="float:left;">Lots of text in here that can be any size....</div>
  <div style="float:left; width:100px;">Date/Time</div>
</div>

第一個 div 的大小是動態的。 如果數字是 10，它將占用比數字 1 更多的空間。第二個 div 也將是動態的，我希望它占用第一個和第三個 div 不占用的任何空間。

Answer 1

HTML

<div style="width:1000px">
  <div id="left">1</div>
  <div id="right">Date/Time</div>
  <div id="center">Lots of text in here that can be any size....</div>
</div>

CSS

#left {
    float: left;   
    width: 20%;
}

#center {
    margin-left: 20%;
    margin-right: 100px;
}

#right {
    float: right;
    width: 100px;   
}

見小提琴。

Answer 2

嘗試這個：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>How do I make a floating div dynamically expand to take up maximum space?</title>
    <style type="text/css">
    #left {
        float:left;
        border:1px solid red;
    }
    #right {
        float:right;
        border:1px solid green;
        width:100px;
    }
    #center {
        overflow-x:hidden;
        border:1px solid blue;
    }
    </style>
</head>
<body>

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1>

    <div id="left">
    Un-fixed width left, whose content may change.
    </div>
    <div id="right">
    Fixed WIdth Right column which shouldn't expand.
    </div>
    <div id="center">
    The center content<br />Which should expand as necessary
    </div>

</body>
</html>

Answer 3

您可能很久以前就發現了這一點，但對於下一個人，您現在可以使用 CSS3 flexbox 執行此操作。 （ W3c 的最新規范， Mozilla 文檔， css-tricks ）

HTML

<div class="flex-container">
    <div>1</div>
    <div class="expandable">Lots of text in here</div>
    <div style="float:left; width:100px;">Date/Time</div>
</div>

CSS

.flex-container {
    display: flex;
    width: 1000px;
    border: 1px solid black;
}   
.expandable {
    flex: 100 100;
    text-align: center;
}

這是jsfiddle 。

如何使浮動 div 動態擴展以占用最大空間？

問題描述

3 個解決方案

解決方案1
2 已采納 2011-05-30 18:54:07

解決方案2
1 2011-05-30 18:50:14

解決方案3
0 2015-04-23 12:16:49

如何使浮動 div 動態擴展以占用最大空間？

問題描述

3 個解決方案

解決方案1 2 已采納 2011-05-30 18:54:07

解決方案2 1 2011-05-30 18:50:14

解決方案3 0 2015-04-23 12:16:49

解決方案1
2 已采納 2011-05-30 18:54:07

解決方案2
1 2011-05-30 18:50:14

解決方案3
0 2015-04-23 12:16:49