用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-leftmargin-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);