使一個 div 填滿剩余的寬度

Question

如何讓 div 填滿剩余的寬度？

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

我怎樣才能讓div2填滿剩余部分？

Answer 1

嘗試這樣的事情：

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

div 自然會占據其容器的 100% 寬度，無需顯式設置此寬度。 通過添加與兩側 div 相同的左/右外邊距，它自己的內容被迫位於它們之間。

請注意，“中間格”雲在HTML“正確格”后

Answer 2

最新解決方案（2014 年 10 月）：為流暢的布局做好准備

---

簡介：

這種解決方案甚至比Leigh提供的解決方案更簡單。 它實際上是基於它。

在這里，你可以看到，中間的元素（在我們的情況下， "content__middle"類）沒有指定任何尺寸屬性-根本沒有寬度，也沒有填充物，也沒有保證金相關的屬性-但只有一個overflow: auto; （見注 1）。

最大的優點是現在您可以為左右元素指定max-width和min-width 。 這對於流體布局來說非常棒......因此響應式布局:-)

注意 1：與 Leigh 的答案相比，您需要將margin-left和margin-right屬性添加到"content__middle"類。

---

具有非流體布局的代碼：

這里的左右元素（具有類"content__left"和"content__right" ）具有固定的寬度（以像素為單位）：因此稱為非流體布局。

http://jsbin.com/qukocefudusu/1/edit?html,css,output 上的現場演示

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

---

具有流體布局的代碼：

這里的左右元素（具有類"content__left"和"content__right" ）具有可變寬度（以百分比表示）但也有最小和最大寬度：因此稱為流體布局。

具有max-width屬性的流體布局中的實時演示http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

---

瀏覽器支持

在 BrowserStack.com 上在以下 Web 瀏覽器上進行了測試：

• IE7 到 IE11
• FF 20, FF 28
• Safari 4.0 (Windows XP)、Safari 5.1 (Windows XP)
• 鉻 20、鉻 25、鉻 30、鉻 33、
• 歌劇20

Answer 3

Flex-boxes 是解決方案 - 它們非常棒。 十年來，我一直想從 css 中得到這樣的東西。 您只需要為“Main”和flex-grow: 100添加display: flex （其中 100 是任意的——它是否正好是 100 並不重要）。 嘗試添加此樣式（添加顏色以使效果可見）：

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

有關 flex 框的更多信息，請訪問： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

使用CSS Flexbox flex-grow屬性來實現這一點。

 .main { display: flex; } .col-1, .col-3 { width: 100px; } .col-2 { flex-grow: 1; }

 <div class="main"> <div class="col-1" style="background: #fc9;">Left column</div> <div class="col-2" style="background: #eee;">Middle column</div> <div class="col-3" style="background: #fc9;">Right column</div> </div>

Answer 5

雖然發布答案bit晚，但這里有一種不使用邊距的替代方法。

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

這種方法很神奇，但這里有一個解釋:)\\

在這里擺弄一個類似的樣本。

Answer 6

必須占用剩余空間的 Div 必須是一個類.. 其他 div 可以是 id(s) 但它們必須有寬度..

CSS :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

以下鏈接包含正在運行的代碼，它應該可以解決剩余區域覆蓋問題。

js小提琴

Answer 7

我正在尋找相反問題的解決方案，我需要在中心有一個固定寬度的 div，在兩側有一個流體寬度的 div，所以我想出了以下內容，並認為我會在這里發布，以防有​​人需要它。

 #wrapper { clear: both; width: 100%; } #wrapper div { display: inline-block; height: 500px; } #center { background-color: green; margin: 0 auto; overflow: auto; width: 500px; } #left { float: left; } #right { float: right; } .fluid { background-color: yellow; width: calc(50% - 250px); }

 <div id="wrapper"> <div id="center"> This is fixed width in the centre </div> <div id="left" class="fluid"> This is fluid width on the left </div> <div id="right" class="fluid"> This is fluid width on the right </div> </div>

如果更改#center元素的寬度，則需要將.fluid的 width 屬性更新為：

width: calc(50% - [half of center width]px);