Html 设置 float:left 时将 div 扩展到最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1017880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand div to max width when float:left is set
提问by Flo
I have something like that:
我有这样的事情：
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
both floats are neccesary. I want the content div to fill the whole screen minus those 100px for the menu. If i dont use float the div expands exactly as it should. But how do i set this when float is set? If i use sth like
两个花车都是必要的。我希望内容 div 填充整个屏幕减去菜单的 100px。如果我不使用浮动，div 会完全按照它应该的方式展开。但是当设置浮动时我如何设置它？如果我使用某样东西
style=width:100%
then the content div gets the size of the parent, which is either the body or another div which i also tried, and so of course it does not fit right of the menu and is then shown below.
然后内容 div 获取父级的大小，它是主体或我也尝试过的另一个 div，因此当然它不适合菜单的右侧，然后显示在下面。
回答by merkuro
Hope I've understood you correctly, take a look at this: http://jsfiddle.net/EAEKc/
希望我已经正确理解你，看看这个：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>回答by alanaktion
The most cross-compatible way I've found of doing this is not very obvious. You need to remove the float from the second column, and apply overflow:hiddento it. Although this would seem to be hiding any content that goes outside of the div, it actually forces the div to stay within its parent.
我发现这样做的最交叉兼容的方式不是很明显。您需要从第二列中删除浮点数，并应用overflow:hidden到它。尽管这似乎隐藏了 div 之外的任何内容，但它实际上强制 div 留在其父级中。
Using your code, this is an example of how it could be done:
使用您的代码，这是如何完成的示例：
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
Hope this is useful to anyone having this issue, it's what I found works the best for the site I was building, after trying to get it to adjust to other resolutions. Unfortunately, this doesn't to work if you include a right-floated divafter the content as well, if anyone knows a good way to get that to work, with good IE compatibility, I'd be very happy to hear it.
希望这对遇到此问题的任何人都有用，在尝试使其适应其他分辨率后，我发现它最适合我正在构建的网站。不幸的是，如果您div在内容之后也包含一个右浮动，这将不起作用，如果有人知道让它工作的好方法，具有良好的 IE 兼容性，我会很高兴听到它。
New, better option using display: flex;
使用新的更好的选择 display: flex;
Now that the Flexbox model is fairly widely implemented, I'd actually recommend using it instead, since it allows much more flexibility with the layout. Here's a simple two-column like the original:
现在 Flexbox 模型得到了相当广泛的实现，我实际上建议改用它，因为它允许更多flex的布局能力。这是一个简单的两列，就像原来的一样：
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
And here's a three-column with a flexible-width center column!
这是一个带有灵活宽度中心列的三列！
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
回答by Wilt
Solution without fixing size on your margin
不固定边距大小的解决方案
.content .right{
overflow: auto;
background-color: red;
}
+1 for Merkuro, but if the size of the float changes your fixed margin will fail.
If u use above CSS on the right divit will nicely change size with changing size on the left float. It is a bit more flexible like that.
Check the fiddle here: http://jsfiddle.net/9ZHBK/144/
Merkuro 为 +1，但如果浮动的大小发生变化，您的固定保证金将失败。如果你在右边使用上面的 CSS，div它会随着左边浮动大小的改变而很好地改变大小。它更灵活一点。在这里检查小提琴：http: //jsfiddle.net/9ZHBK/144/
回答by Sean Aitken
Elements that are floated are taken out of the normal flow layout, and block elements, such as DIV's, no longer span the width of their parent. The rules change in this situation. Instead of reinventing the wheel, check out this site for some possible solutions to create the two column layout you are after: http://www.maxdesign.com.au/presentation/page_layouts/
浮动的元素从正常的流布局中取出，块元素（例如 DIV）不再跨越其父元素的宽度。在这种情况下，规则会发生变化。不要重新发明轮子，请查看此站点以获取一些可能的解决方案来创建您所追求的两列布局：http: //www.maxdesign.com.au/presentation/page_layouts/
Specifically, the "Liquid Two-Column layout".
具体来说，“液体两列布局”。
Cheers!
干杯!
回答by Snowie
This is an updated solution for HTML 5 if anyone is interested & not fond of "floating".
如果有人对“浮动”感兴趣且不喜欢，这是 HTML 5 的更新解决方案。
Table works great in this case as you can set the fixed width to the table & table-cell.
在这种情况下，表格效果很好，因为您可以为表格和表格单元格设置固定宽度。
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/original source code from @merkuro
http://jsfiddle.net/EAEKc/596/来自@merkuro 的原始源代码
回答by suathd
this usage may solve your problem.
这种用法可能会解决您的问题。
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>回答by kubilayeksioglu
And based on merkuro's solution, if you would like maximize the one on the left, you should use:
并且基于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>
Has not been tested on IE, so it may look broken on IE.
尚未在 IE 上进行测试，因此在 IE 上可能看起来已损坏。
回答by Christoph Bühler
The accepted answer might work, but I don't like the idea of overlapping margins. In HTML5, you would do this with display: flex;. It's a clean solution. Just set the width for one element and flex-grow: 1;for the dynamic element. An edited version of merkuros fiddle: https://jsfiddle.net/EAEKc/1499/
接受的答案可能有效，但我不喜欢重叠边距的想法。在 HTML5 中，您可以使用display: flex;. 这是一个干净的解决方案。只需为一个元素和flex-grow: 1;动态元素设置宽度。merkuros fiddle 的编辑版本：https://jsfiddle.net/EAEKc/1499/
回答by Sanjib Debnath
Hi there is an easy way with overflow hidden method on right element.
嗨，有一种简单的方法可以在正确的元素上使用溢出隐藏方法。
.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> 回答by kirtan-shah
This might work:
这可能有效：
div{
display:inline-block;
width:100%;
float:left;
}
