设置 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%

然后 content div 得到父 div 的大小，这是 body 或者另一个 div，我也试过，所以当然它不适合菜单右侧，然后显示如下。

175549 次浏览
小开

浮动的元素从正常的流布局中取出，块元素(如 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>

小开

根据 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 上看起来可能是坏的。

小开

我找到的最具交叉兼容性的方法并不是很明显。您需要从第二列中删除浮点数，并对其应用 overflow:hidden。虽然这看起来似乎隐藏了除 div 之外的所有内容，但实际上它强制 div 保持在其父节点内。

使用您的代码，这是一个如何完成的示例:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

希望这对任何有这个问题的人都有用，这是我发现最适合我正在建设的网站，在试图让它调整到其他解决方案。不幸的是，如果你在内容后面加入了一个右浮动的 div，那么这个方法就不起作用了。如果有人知道一个好的方法来实现这个方法，并且具有良好的 IE 兼容性，我会很高兴听到这个方法。

新的，更好的选择使用 display: flex;

现在 Flexbox 模型已经得到了相当广泛的实现，我实际上建议使用它，因为它允许更多的 flexability 与布局。这里有一个和原版一样的简单的两栏:

<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>
小开

解决方案没有固定大小在您的边缘

.content .right{
overflow: auto;
background-color: red;
}

Merkuro + 1，但是如果浮动的大小改变你的固定保证金将会失败。 如果你在右边的 div上使用上面的 CSS，它会很好地改变大小，改变左边浮动的大小。这样比较灵活。 检查这里的小提琴: http://jsfiddle.net/9zhbk/144/

小开

这是一个更新的 HTML 5解决方案，如果有人感兴趣和不喜欢“浮动”。

表在这种情况下工作得很好，因为你可以设置固定宽度的表 & 表单元格。

.content-container{
display: table;
width: 300px;
}


.content .right{
display: table-cell;
background-color:green;
width: 100px;
}

http://jsfiddle.net/EAEKc/596/ 原始源代码@merkuro

小开

这可能会奏效:

    div{
display:inline-block;
width:100%;
float:left;
}
小开

接受的答案可能有用，但我不喜欢重叠边界的想法。在 HTML5中，您可以使用 display: flex;来完成这项工作。这是一个干净的解决方案。只需设置一个元素的宽度和动态元素的 flex-grow: 1;。编辑版本的 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>

小开

这种用法可以解决你的问题。

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>


提交答案