使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>

divs自然会占用其容器的100%宽度,没有必要明确设置这个宽度.通过添加与两个边div相同的左/右边距,它自己的内容被强制放在它们之间.

需要注意的是"中间格"云后的"右格"在HTML

Answer 2

最新解决方案(2014年10月):为流体布局做好准备

介绍:

这种解决方案甚至比提供的解决方案更简单Leigh.它实际上是基于它.

在这里,你可以看到,中间元素(在本例中,有"content__middle"类)并没有具有规定的任何尺寸属性-没有宽度,也没有填充物,也没有保证金相关的属性在所有-但只有一个overflow: auto;(见注1).

最大的好处是,现在您可以为左右元素指定a max-width和amin-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>

浏览器支持

在以下Web浏览器上的BrowserStack.com上测试:

• IE7到IE11
• Ff 20,Ff 28
• Safari 4.0(Windows XP),Safari 5.1(Windows XP)
• Chrome 20,Chrome 25,Chrome 30,Chrome 33,
• 歌剧20

Answer 3

灵活盒子是解决方案 - 而且它们非常棒.十多年来,我一直想用css这样的东西.你需要的只是为display: flex你的风格添加"Main"和flex-grow: 100(其中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>

有关弹性盒的更多信息,请访问:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

Flexbox解决方案

.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>

注意:如果您的支持的浏览器需要,请添加flex供应商前缀.