我有类似的东西：
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
style=width:100%
然后内容div获取父级的大小，它是我也尝试过的主体或另一个div，所以它当然不适合菜单，然后显示在下面。
答案 0 :(得分：137)
希望我能正确理解你，看看这个：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>
答案 1 :(得分：96)
我发现这种做法最交叉兼容的方式并不是很明显。您需要从第二列中删除浮动，并将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>
答案 2 :(得分：30)
.content .right{
overflow: auto;
background-color: red;
}
+1为Merkuro，但如果浮动的大小改变你的固定余量将失败。
如果你使用右边的div上面的CSS，它会很好地改变大小，左边浮动的大小会改变。它有点灵活。
在这里查看小提琴：http://jsfiddle.net/9ZHBK/144/
答案 3 :(得分：6)
浮动的元素将从正常的流布局中取出，块元素（如DIV）不再跨越其父级的宽度。在这种情况下规则发生了变化。不要重新发明轮子，请查看此站点以获取一些可能的解决方案，以创建您所追求的两个列布局：http://www.maxdesign.com.au/presentation/page_layouts/
具体来说，就是“液体双柱布局”。
干杯！
答案 4 :(得分：4)
如果有人感兴趣，这是针对HTML 5的更新解决方案。不喜欢“浮动”。
在这种情况下，表格效果很好，因为您可以将固定宽度设置为表格＆amp;表单元格。
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ 来自@merkuro的原始源代码
答案 5 :(得分：4)
这种用法可以解决您的问题。
width: calc(100% - 100px);
<!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 {
float: left;
width: calc(100% - 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>
答案 6 :(得分：3)
根据merkuro的解决方案，如果你想最大化左边的那个，你应该使用：
<!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上进行过测试，因此在IE上可能看起来很糟糕。
答案 7 :(得分：1)
接受的答案可能有效，但我不喜欢重叠边距的想法。在HTML5中，您可以使用display: flex;执行此操作。这是一个干净的解决方案。只需为一个元素设置宽度，为动态元素设置flex-grow: 1;。 merkuros小编的编辑版本：https://jsfiddle.net/EAEKc/1499/
答案 8 :(得分：0)
嗨，右边的元素有一个简单的方法可以使用溢出隐藏方法。
.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>
答案 9 :(得分：-1)
这可能有效：
div{
display:inline-block;
width:100%;
float:left;
}