如何使div来填充剩余的水平空间?

我有2个div:一个在左侧,另一个在我的页面右侧。 在左边的一个有固定的宽度,我想右边的一个来填补剩下的空间。

在右侧的是导航,我想要它来填补右侧的剩余空间:

我的CSS:

#search { width: 160px; height: 25px; float: left; background-color: #FFF; } #navigation { width: 780 float: left; /*background-color: url('..http://img.dovov.comtransparent.png') ;*/ background-color: #A53030; } 

我的Html:

 <div id="search"> </div> <?php include("navigation.html"); ?> <div id="left-column"> 

预先感谢!

这似乎完成了你要去的。

 #left { float:left; width:180px; background-color:#ff0000; } #right { width: 100%; background-color:#00FF00; } 
 <div> <div id="left"> left </div> <div id="right"> right </div> </div> 

我在Boushley的答案中发现的问题是,如果右列比左更长,它将围绕左边并重新填充整个空间。 这不是我正在寻找的行为。 在search了很多'解决scheme'后,我发现这个关于创build三个列页面的令人敬畏的教程 。

作者提供了三种不同的方式,一种是固定宽度,一种是三个可变的列,一个是固定的外部列和一个可变的宽度中间。 比我发现的其他例子更优雅和有效。 大大提高了我对CSS布局的理解。

基本上,在上面的简单情况下,将第一列浮起,并给它一个固定的宽度。 然后给右边的一列比第一列宽一点。 而已。 完成。 Ala Boushley的代码:

 <html> <head> <title>This is My Page's Title</title> <style type="text/css"> #left { float:left; width:180px; background-color:#ff0000; } #right { margin-left: 190px; background-color:#00FF00; } </style> </head> <body> <div> <div id="left"> left </div> <div id="right"> right </div> </div> </body> </html> 

http://jsfiddle.net/CSbbM/

以Boushley的例子来说,左边一列是右边的另一列。 只要左列结束,右边开始再次填充整个空间。 在这里,右侧的列进一步简单地alignment到页面中,左侧的列占据了大量的页边距。 无需stream量交互。

解决scheme来自显示属性。

基本上你需要使两个div像表格单元一样工作。 所以,而不是使用float:left ,你将不得不使用display:table-cell在div上,而对于dynamic宽度div,你需要设置width:auto; 也。 这两个div应放置在100%宽度的容器中,并使用display:table属性。

这是CSS:

 .container {display:table;width:100%} #search { width: 160px; height: 25px; display:table-cell; background-color: #FFF; } #navigation { width: auto; display:table-cell; /*background-color: url('..http://img.dovov.comtransparent.png') ;*/ background-color: #A53030; } *html #navigation {float:left;} 

而HTML:

 <div class="container"> <div id="search"></div> <div id="navigation"></div> </div> 

重要提示:对于Internet Explorer,您需要在dynamic宽度div上指定浮动属性,否则空间将不会被填充。

我希望这会解决你的问题。 如果你愿意,你可以阅读我在博客上写的关于这个的完整文章。

由于这是一个相当stream行的问题,我倾向于使用BFC分享一个很好的解决scheme。
下面的Codepen示例在这里 。

 .left { float: left; width: 100px; } .right { overflow: auto; } 

在这种情况下, overflow: auto触发上下文行为,并使正确的元素扩展到可用的剩余宽度,如果.left消失,它自然会扩展到全宽度。 对于许多用户界面布局来说,这是一个非常有用且干净的技巧,但也许很难理解“为什么它起作用”。

现在,使用flex-box方法(可以适应所有浏览器与 – 前缀)

 .container { display: flex; } .left { width: 180px; } .r { flex-grow: 1; } 

更多信息: https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

@ Boushley的答案就是壁橱,但是有一个问题没有得到解决。 正确的 div取整个浏览器的宽度; 内容采取预期的宽度。 要更好地看到这个问题:

 <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } body { height: 100%; } #left { opacity: 0; height: inherit; float: left; width: 180px; background: green; } #right { height: inherit; background: orange; } table { width: 100%; background: red; } </style> </head> <body> <div id="left"> <p>Left</p> </div> <div id="right"> <table><tr><td>Hello, World!</td></tr></table> </div> </body> </html> 

http://jsfiddle.net/79hpS/

内容是在正确的地方(在Firefox中),但是,宽度不正确。 当子元素开始inheritance宽度(例如width: 100%的表)时,它们的宽度等于浏览器的宽度,导致它们溢出页面右侧,并创build一个水平滚动条(在Firefox中)或不漂浮和被推下来(在铬)。

你可以通过添加overflow: hidden到右边的列。 这为内容和div提供了正确的宽度。 此外,表格将接收正确的宽度并填充剩余的可用宽度。

我尝试了一些上面的其他解决scheme,他们没有充分利用某些边缘案例,太复杂,以保证解决这些问题。 这工作,很简单。

如果有任何问题或疑虑,随时提出。 谢谢!

如果您不需要与某些浏览器的旧版本兼容(例如IE 10 8或更低版本),则可以使用calc() CSS函数:

 #left { float:left; width:180px; background-color:#ff0000; } #right { float: left; width: calc(100% - 180px); background-color:#00FF00; } 

这里是一个可接受的解决scheme的一个小小的修复,它可以防止右栏落在左栏下。 更换width: 100%; overflow: hidden; 一个棘手的解决scheme,如果有人不知道。

 <html> <head> <title>This is My Page's Title</title> <style type="text/css"> #left { float: left; width: 180px; background-color: #ff0000; } #right { overflow: hidden; background-color: #00FF00; } </style> </head> <body> <div> <div id="left"> left </div> <div id="right"> right </div> </div> 

http://jsfiddle.net/MHeqG/2600/

同时检查三个列布局的示例: http : //jsfiddle.net/MHeqG/3148/

Boushley的答案似乎是最好的方式去使用浮游物来安排这个。 但是,这并非没有问题。 在展开的元素中嵌套浮动将不会提供给您; 它会打破页面。

所展示的方法在扩展元素时基本上是“伪造的” – 它实际上并不是浮动的,它只是利用其边距与固定宽度的浮动元素一起玩。

问题就是这样:扩展元素不会浮动。 如果你试图在扩展元素中有任何嵌套的浮动,那么这些“嵌套”的浮动元素根本就没有嵌套。 当你试图坚持一个clear: both; 在你的“嵌套”浮动项目下,你最终将清除顶级浮动。

然后,要使用Boushley的解决scheme,我想补充说,你应该放置一个div如下:.fakeFloat {height:100%; 宽度:100%; float:left; }并将其直接放置在展开的div中; 所有展开的div的内容都应该在这个fakeFloat元素中。

出于这个原因,我build议在这个特定情况下使用表格。 浮动元素实际上并不是用来做你想要的扩展,而使用表的解决scheme是微不足道的。 一般认为浮动更适合于布局,而不是表格……但是你不是在这里使用浮动,而是在伪造它 – 这种方式打破了这个特定情况下文体论争的目的,我卑微的意见。

使用display:flex

 <div style="width:500px; display:flex"> <div style="width:150px; height:30px; background:red">fixed width</div> <div style="width:100%; height:30px; background:green">remaining</div> </div> 

我尝试了上面的解决scheme,留下一个液体,固定的权利,但没有工作(我知道问题是相反的,但我认为这是相关的)。 这是什么工作:

 .wrapper {margin-right:150px;} .wrapper .left {float:left; width:100%; margin-right:-150px;} .right {float:right; width:150px;} <div class="wrapper"><div class="left"></div></div> <div class="right"></div> 

我有一个类似的问题,我发现这里的解决scheme: https : //stackoverflow.com/a/16909141/3934886

解决scheme是为固定的中心格和液体侧柱。

 .center{ background:#ddd; width: 500px; float:left; } .left{ background:#999; width: calc(50% - 250px); float:left; } .right{ background:#999; width: calc(50% - 250px); float:right; } 

如果你想要一个固定的左列,只需改变公式。

如果您试图在2个项目之间填充Flexbox中的剩余空间,请将以下类添加到您要分隔的2之间的空白div:

 .fill { // This fills the remaining space, by using flexbox. flex: 1 1 auto; } 

试过所有这些答案,他们都没有工作(米海几乎做到了,所以+1,但我需要一个更大的内在因素,所以它打破了)。

最好的解决scheme(截至这个答案的date)仍然是:使用jQuery在运行时设置您的div宽度,使用固定宽度div大小的预设常量。 你会为自己节省很多头痛。

/ * * css * /

 #search { position: absolute; width: 100px; } .right-wrapper { display: table; width: 100%; padding-left:100px; } .right-wrapper #navigation { display: table-cell; background-color: #A53030; } 

/ * * html * /

 <div id="search"></div> <div class="right-wrapper"> <div id="navigation"></div> </div> 

我有一个非常简单的解决scheme! // HTML

 <div> <div id="left"> left </div> <div id="right"> right </div> 

// CSS

 #left { float:left; width:50%; position:relative; background-color:red; } #right { position:relative; background-color:#00FF00;} 

链接: http : //jsfiddle.net/MHeqG/

我有类似的问题,并提出以下运作良好

CSS:

 .top { width: auto; height: 100px; background-color: black; border: solid 2px purple; overflow: hidden; } .left { float:left; width:100px; background-color:#ff0000; padding: 10px; border: solid 2px black; } .right { width: auto; background-color:#00FF00; padding: 10px; border: solid 2px orange; overflow: hidden; } .content { margin: auto; width: 300px; min-height: 300px; padding: 10px; border: dotted 2px gray; } 

HTML:

 <div class=top>top </div> <div> <div class="left">left </div> <div class="right"> <div class="content">right </div> </div> </div> 

当窗口缩小时,此方法不会换行,而是自动扩展“内容”区域。 它将保持站点菜单的静态宽度(左)。

并为自动扩展内容框和左侧竖框(站点菜单)演示:

https://jsfiddle.net/tidan/332a6qte/

尝试添加relative位置,删除右侧的widthfloat属性,然后添加0值的leftright属性。

此外,您可以添加margin left规则,该值基于左侧元素的宽度(如果您需要空间 ,则加上一些像素)以保持其位置。

这个例子正在为我工​​作:

  #search { width: 160px; height: 25px; float: left; background-color: #FFF; } #navigation { display: block; position: relative; left: 0; right: 0; margin: 0 0 0 166px; background-color: #A53030; } 
 .container { width:100%; display:table; vertical-align:middle; } .left { width:100%; display:table-cell; text-align:center; } .right { width:40px; height:40px; display:table-cell; float:right; } 
 <div class="container"> <div class="left">Left</div> <div class="right">Right</div> </div 

我想知道没有人使用position: absolute position: relative

所以,另一个解决scheme是:

HTML

 <header> <div id="left"><input type="text"></div> <div id="right">Menu1 Menu2 Menu3</div> </header> 

CSS

 header { position: relative; } #left { width: 160px; height: 25px; } #right { position: absolute; top: 0px; left: 160px; right: 0px; height: 25px; } 

Jsfiddle的例子

新来的CSS。 但是我通过使用内联块来解决这个问题。 检查了这一点: http : //learnlayout.com/inline-block.html

我遇到了这个相同的问题,试图布局一些jqueryUI控件。 虽然现在的共同理念是“使用DIV而不是TABLE ”,我发现在我的情况下使用TABLE效果更好。 特别是,如果您需要在两个元素之间进行简单的alignment(例如,垂直居中,水平居中等),TABLE提供的选项可以为此提供简单直观的控制。

这是我的解决scheme:

 <html> <head> <title>Sample solution for fixed left, variable right layout</title> <style type="text/css"> #controls { width: 100%; } #RightSide { background-color:green; } </style> </head> <body> <div id="controls"> <table border="0" cellspacing="2" cellpadding="0"> <TR> <TD> <button> FixedWidth </button> </TD> <TD width="99%" ALIGN="CENTER"> <div id="RightSide">Right</div> </TD> </TR> </table> </div> </body> </html>