设置 float:left 时将 div 扩展到最大宽度
Posted
技术标签:
【中文标题】设置 float:left 时将 div 扩展到最大宽度【英文标题】：Expand div to max width when float:left is set 【发布时间】：2010-11-04 07:26:36 【问题描述】：我有类似的东西：
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
两个花车都是必需的。我希望内容 div 填满整个屏幕，减去菜单的 100 像素。如果我不使用浮动，则 div 会完全按照应有的方式扩展。但是当设置浮动时我该如何设置呢？如果我像这样使用某事
style=width:100%
然后内容 div 获取父级的大小，它是主体或另一个我也尝试过的 div，所以它当然不适合菜单右侧，然后显示在下面。
【问题讨论】：
【参考方案1】：希望我的理解正确，看看这个：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：好点。我同意，“.right”不需要浮动来获得预期的效果。 @Flo：你能确认一下，内容 div 必须浮动吗？喜欢其他原因吗？ 可能行得通，我会尝试一下，你的理由是对的，浮动更好，但我认为它不会工作 啊，天哪，我再次看到了我将其更改为浮动的原因：Ie7 和 Firefox 做得很好，但 ie 5.5 和 ie 6 在左侧 div 的右边缘开始边距，所以它有两个 div 之间的 236px（实际宽度，例如 100）间隙【参考方案2】：我发现这样做的最交叉兼容的方式不是很明显。您需要从第二列中删除浮点数，并将overflow:hidden 应用于它。尽管这似乎隐藏了 div 之外的任何内容，但它实际上强制 div 留在其父级中。
使用您的代码，这是一个如何完成的示例：
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
希望这对遇到此问题的任何人都有用，在尝试使其适应其他分辨率之后，我发现它最适合我正在构建的网站。不幸的是，如果您在内容之后也包含一个右浮动的div，这将不起作用，如果有人知道一种让它工作的好方法，并且具有良好的 IE 兼容性，我会很高兴听到它.
使用display: flex; 的新的、更好的选择
既然 Flexbox 模型已被广泛实施，我实际上建议使用它，因为它允许更多 flexibility 布局。这是一个简单的两列，就像原来的一样：
<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>
【讨论】：
经过进一步测试，看来您不需要使用“位置：相对”触发 hasLayout 才能在 IE 6 中工作，我不确定 IE 5，但通常无论如何包含它都不是问题，只是为了安全。 这个答案似乎不受欢迎，但很高兴知道。这个确实让你漂浮，即使在 div 中有一个浮动元素。我是谷歌“块格式上下文”。现在。 最好的方法是使用一个简单的 2 列表格，而不是浪费时间添加大量 CSS 不跨浏览器兼容的技巧 @Marco 我需要为此使用 CSS，因为我的设计是响应式的。不同的屏幕尺寸需要不同的布局，所以一张桌子是行不通的。此外，这种方法似乎基本上适用于任何人仍在使用的任何浏览器。 @MarcoDemaio，我的观点是，在较小的固定列与主列一样大的屏幕尺寸上，例如在移动设备上，我希望两列变得完整-宽度行，除非我想用 javascript 实际移动内容，否则无法用表格完成。【参考方案3】：不固定边距大小的解决方案
.content .right
overflow: auto;
background-color: red;
Merkuro +1，但如果浮动的大小发生变化，您的固定边距将失败。
如果你在右边使用上面的 CSS div 它会很好地改变左边浮动的大小。它有点像那样灵活。
在这里检查小提琴：http://jsfiddle.net/9ZHBK/144/
【讨论】：
@alanaktion 我把不必要的汽车拿走了。不同之处在于溢出值。显然overflow: hidden 和 overflow auto 导致相同的行为。我也认为人们欣赏小提琴。
如果有人想知道为什么会这样，请看这里：***.com/a/1767270/2756409
我认为这比 merkuro 的解决方案要好。【参考方案4】：
浮动的元素会脱离正常的流布局，块元素（例如 DIV）不再跨越其父元素的宽度。在这种情况下规则会发生变化。与其重新发明***，不如查看这个网站，了解一些可能的解决方案来创建您所追求的两列布局：http://www.maxdesign.com.au/presentation/page_layouts/
特别是“液体两列布局”。
干杯！
【讨论】：
【参考方案5】：这种用法可能会解决您的问题。
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>【讨论】：
欢迎来到 SO。你能解释一下这是如何工作的吗？【参考方案6】：如果有人对“浮动”感兴趣且不喜欢“浮动”，这是 HTML 5 的更新解决方案。
在这种情况下，表格效果很好，因为您可以将固定宽度设置为表格和表格单元格。
.content-container
display: table;
width: 300px;
.content .right
display: table-cell;
background-color:green;
width: 100px;
http://jsfiddle.net/EAEKc/596/ 来自@merkuro 的原始源代码
【讨论】：
+1 终于可以使用右边的固定宽度元素了，即使它在技术上不使用浮动。 +1 所以完全可以。经过多年与浮动、位置和表格的斗争，这是正确的解决方案。接受的解决方案传播不安全的 css。【参考方案7】：根据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 上可能看起来已损坏。
【讨论】：
【参考方案8】：接受的答案可能有效，但我不喜欢重叠边距的想法。在 HTML5 中，您可以使用 display: flex; 执行此操作。这是一个干净的解决方案。只需为一个元素设置宽度，为动态元素设置flex-grow: 1;。 merkuros fiddle 的编辑版本：https://jsfiddle.net/EAEKc/1499/
【讨论】：
【参考方案9】：您好，有一种简单的方法是在右侧元素上使用溢出隐藏方法。
.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> 【讨论】：
【参考方案10】：这可能有效：
div
display:inline-block;
width:100%;
float:left;
【讨论】：
以上是关于设置 float:left 时将 div 扩展到最大宽度的主要内容，如果未能解决你的问题，请参考以下文章