两个漂浮列 – 一个固定，一个宽松的宽度
我已经环顾了所以，但我找不到匹配我的发生，我基本上有两列固定宽度（185px）和另一列没有固定的宽度，但是我需要最后一列来填补最后的空间，例如
........................................... .--------- ------------------------------. .+ + + +. .+ + + +. .+ + + +. .+ + + +. .+ + ------------------------------. .+ + . .+ + . .+ + . .--------- . ...........................................
当第二列填充剩余宽度时，第一列应始终为100％，如果我调整浏览器窗口的大小，则它们都left浮动，第二列显示在第一列的下方。 我需要第二列来填充剩余的宽度，并在调整浏览器窗口的大小时灵活一些。
看看这个 。 没有任何演示，但我以前使用过这个家伙的教程，所以我认为它工作正常。 我从文章中得知主要内容是stream动的。 副内容也可能是液体，但我认为你可以给它一个固定的宽度，离开它。 这里的诀窍是首先放置主要内容。
实际上有一个比浮点运算更简单的方法：
.container { position: relative; } .left { width: 185px; position: absolute; top: 0; left: 0; } .right { margin-left: 185px; }
通过使用本教程中的负边距， CSS可以如下所示
html, body, .container { height:100%; padding:0; margin:0; } .container { min-width: 300px; } .left { float:left; width: 185px; margin-right: -185px; height:100%; } .right { margin-left:185px; }
编辑解决scheme，这次使用flexbox，使左列固定使用flex: 185px 0 0; 然后使用flex-grow:1使右列自动flex-grow:1
*{ box-sizing: border-box; } body{ padding:0; margin:0; } #container{ display:flex; } #left{ height: 100vh; flex: 185px 0 0; background-color:tomato; } #right{ flex-grow: 1; } #right > div{ background:pink; }
<body> <div id="container"> <div id="left"> Left </div> <div id="right"> <div> Right <br/> dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf </div> </div> </div> </body>
如果你不想既不使用浮点数也不使用绝对定位，那么最简单的办法就是
<!DOCTYPE html> <html> <head> <style type="text/css"> body { white-space: nowrap; } div.left { display: inline-block; width: 200px; white-space: normal; background-color: red; vertical-align: top; } div.right { display: inline-block; white-space: normal; background-color: green; } </style> <title></title> </head> <body> <div class="left"> left </div> <div class="right"> right </div> </body> </html>
那么，批准的答案是一个好的，但对于那些在这里search更多的是一个链接。 希望您觉得这个有帮助。 ;）
“位置：绝对的” 答案是相当不错的，但它有跨浏览器的影响，特别是如果你正在开发的IE浏览器。 最好的办法是：
<html> <head> <style> div.right { float: right; width: 200px; } div.left { margin-right: 200px; } div.clear { clear: both; } </style> </head> <body> <div class="right"><!--your code here--></div> <div class="left"><!--your code here--></div> <div class="clear"></div> </body> </html>
请注意，您需要在右侧的div在HTML中被首先调用。 另外，请注意清除列后的浮动内容，如果您有下面的内容，或者有父容器，这些内容将派上用场。
我已经尝试了几乎所有的上述解决scheme，直到我偶然发现，这对我来说奇妙的。 如何使一个div来填充剩余的水平空间（一个非常简单但令人讨厌的CSS专家问题）
不知道为什么，似乎你只需要浮动固定宽度的列。 其余的只是落在地方。
