设置float:left时，将div扩展到最大宽度
我有类似的东西：
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>这两个浮点都是必要的。我想要的内容div，以填补整个屏幕减去100px的菜单。如果我不使用float，div就会完全按照它应该的方式展开。但是当设置了float时，我该如何设置它呢？如果我使用类似的东西
style=width:100%然后，内容div获取父目录的大小，它要么是body，要么是我也尝试过的另一个div，所以它当然不适合菜单的右侧，然后显示在下面。
回答 9
Stack Overflow用户
发布于 2009-06-19 13:27:39
希望我没理解错，看看这个：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>
Stack Overflow用户
发布于 2012-04-11 06:07:34
我所发现的最具交叉兼容性的方法并不是很明显。您需要从第二列中删除浮动，并对其应用overflow:hidden。虽然这似乎隐藏了div之外的任何内容，但它实际上强制div留在其父目录内。
使用你的代码，这是一个如何做到这一点的例子：
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>希望这对任何有这个问题的人都有用，这是我发现对我正在构建的网站最有效的方法，在尝试让它适应其他分辨率后。不幸的是，如果你在内容后面加上一个向右浮动的div，这就不起作用了，如果有人知道一个好的方法让它工作，有很好的IE兼容性，我会很高兴听到的。
使用display: flex;的新的更好的选项
现在Flexbox模型已经得到了相当广泛的实现，我实际上建议使用它，因为它允许布局具有更多的flex灵活性。下面是一个简单的两列代码，与原始代码类似：
<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>Stack Overflow用户
发布于 2013-02-28 15:57:02
解决方案不固定您的利润率
.content .right{
overflow: auto;
background-color: red;
}对于Merkuro为+1，但如果浮动的大小发生变化，您的固定保证金将失败。如果你在右边的div上使用上面的CSS，它会很好地改变左边浮动的大小。这样就更灵活了。在这里检查小提琴：http://jsfiddle.net/9ZHBK/144/
https://stackoverflow.com/questions/1017880
复制相似问题
腾讯云开发者
