当float：left被设置时，将div扩展到最大宽度
我有这样的事情：
<div style="width:100px;float:left">menu</div> <div style="float:left">content</div> 两个花车是必要的。 我希望内容div填充整个屏幕减去菜单的100px。 如果我不使用浮动的div扩大完全是因为它应该。 但是，如何设置浮动时设置？ 如果我使用某物
style=width:100%
那么内容div得到的父母的大小，这是身体或另一个div我也试过，所以当然不适合菜单的权利，然后显示在下面。
希望我已经正确理解了你，看看这个： http : //jsfiddle.net/EAEKc/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Content with Menu</title> <style> .content .left { float: left; width: 100px; background-color: green; } .content .right { margin-left: 100px; background-color: red; } </style> </head> <body> <div class="content"> <div class="left"> <p>Hi, Flo!</p> </div> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> </div> </div> </body> </html>
我发现这样做的最相互交叉的方式并不是很明显。 你需要从第二列中删除float，并应用overflow:hidden 。 虽然这似乎隐藏了任何超出div的内容，但它实际上会迫使div保留在其父项中。
使用你的代码，这是一个如何完成的例子：
<div style="width: 100px; float: left;">menu</div> <div style="overflow: hidden;">content</div>
希望这对任何有这个问题的人都有用，这是我发现的作品最适合我正在build设的网站，试图让它适应其他决议。 不幸的是，如果在内容之后包含右浮动的div ，那么这是行不通的，如果有人知道一个好的方法来实现这个function，并且具有良好的IE兼容性，我会很高兴听到这个消息。
新的，更好的select使用display: flex;
既然Flexbox模型的实现相当广泛，我实际上推荐使用它，因为它允许更多的布局灵活性。 这是一个简单的双列像原来的：
<div style="display: flex;"> <div style="width: 100px;">menu</div> <div style="flex: 1;">content</div> </div>
这里有一个三列，宽度为中间的柱子！
<div style="display: flex;"> <div style="width: 100px;">menu</div> <div style="flex:1;">content</div> <div style="width: 100px;">sidebar</div> </div>
解决scheme没有固定您的利润大小
.content .right{ overflow: auto; background-color: red; }
Merkuro +1，但如果浮动的大小改变你的固定保证金将失败。 如果你在右边的div上使用上面的CSS，它会很好地改变左边浮动大小的大小。 这样更灵活一些。 检查小提琴在这里： http : //jsfiddle.net/9ZHBK/144/
浮动的元素从正常stream布局中取出，块元素（例如DIV）不再跨越父元素的宽度。 规则在这种情况下改变。 而不是重新发明轮子，看看这个网站的一些可能的解决scheme，以创build你在之后的两个列布局： http : //www.maxdesign.com.au/presentation/page_layouts/
具体而言，“液体两列布局”。
干杯!
并根据merkuro的解决scheme，如果你想最大化左边的一个，你应该使用：
<!DOCTYPE html> <html lang="en"> <head> <meta "charset="UTF-8" /> <title>Content with Menu</title> <style> .content .left { margin-right: 100px; background-color: green; } .content .right { float: right; width: 100px; background-color: red; } </style> </head> <body> <div class="content"> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> </div> <div class="left"> <p>Hi, Flo!</p> </div> </div> </body> </html>
还没有在IE浏览器上testing过，所以在IE上可能看起来破了。
如果有人感兴趣并且不喜欢“浮动”，这是HTML 5的更新解决scheme。
在这种情况下，表格可以很好地工作，因为您可以将固定宽度设置为表格和表格单元格。
.content-container{ display: table; width: 300px; } .content .right{ display: table-cell; background-color:green; width: 100px; }
来自@merkuro的http://jsfiddle.net/EAEKc/596/原始源代码;
接受的答案可能有效，但我不喜欢重叠利润的想法。 在HTML5中，你可以使用display: flex; 。 这是一个干净的解决scheme。 只需设置一个元素的宽度和flex-grow: 1; 为dynamic元素。 merkuros小提琴的编辑版本： https ：//jsfiddle.net/EAEKc/1499/
您好右边元素溢出隐藏方法有一个简单的方法。
.content .left { float:left; width:100px; background-color:green; } .content .right { overflow: hidden; background-color:red; }
<!DOCTYPE html> <html lang="en"> <head> <title>Content Menu</title> </head> <body> <div class="content"> <div class="left"> <p>Hi, Flo! I am Left</p> </div> <div class="right"> <p>is</p> <p>this</p> <p>what</p> <p>you are looking for?</p> <p> It done with overflow hidden and result is same.</p> </div> </div> </body> </html>
这可能工作：
div{ display:inline-block; width:100%; float:left; }
