用div来填充剩余的宽度
我怎样才能让一个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来填补余下的？
试试这样的事情：
<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相同的左/右边距，它自己的内容被迫坐在它们之间。
请注意，“中间div”在HTML中的“正确的div”之后
最新的解决scheme（2014年10月）：准备stream体布局
介绍：
这个解决scheme比Leigh提供的解决scheme更简单。 它实际上是基于它的。
在这里你可以注意到中间元素（在我们的例子中是"content__middle"类）没有指定任何维度属性 – 没有宽度，也没有填充，也没有与margin有关的属性 – 但只有overflow: auto; （见注1）。
最大的好处就是现在你可以为你的左右元素指定一个max-width和一个min-width 。 这是stream体布局梦幻般的..因此， 响应布局:-)
注1：与Leigh的答案相比，您需要在"content__middle"类中添加margin-left和margin-right属性。
具有非stream体布局的代码：
在这里，左右元素（类"content__left"和"content__right" ）具有固定的宽度 （以像素为单位）：因此称为非stream体布局。
在线演示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>
具有stream体布局的代码：
在这里，左右元素（类"content__left"和"content__right" ）具有可变宽度 （百分比），但也是最小和最大宽度：因此称为stream体布局。
现场演示中max-width属性的stream体布局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上testing以下Web浏览器：
- 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
灵活盒子是解决scheme – 他们太棒了。 我一直想要这样的东西从CSS出来十年。 所有你需要的是添加display: flex为您的风格为“主”和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/
Flexbox解决scheme
.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>
尽pipe发布答案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>
这个方法像魔术一样工作，但这里是一个解释：）\
在这里摆弄一个类似的例子。
必须采取剩余空间的分区必须是一个类..其他divs可以是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>
以下链接的代码正在运行，应该解决剩余的区域覆盖问题。
的jsfiddle
我正在寻找解决相反的问题，我需要一个固定的宽度div在中心和stream体宽度div在任何一方，所以我想出了以下，并认为我会张贴在这里，以防万一需要它。
HTML：
<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>
CSS：
#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); }
如果更改#center元素的宽度，则需要将.fluid的width属性更新为：
width: calc(50% - [half of center width]px);
