Html 如何使用 CSS 自动调整 div 的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5865368/
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
How automatically adjust div's width using CSS?
提问by Misha Moroshko
Consider the following example:
考虑以下示例：
HTML:
HTML：
<div class="wrapper">
<div class="left">Some text here</div><div class="right">Hello Stack Overflow</div>
</div>
CSS:
CSS：
.wrapper {
border: 1px solid black;
width: 400px;
}
.left {
border: 1px solid green;
display: inline-block;
}
.right {
border: 1px solid red;
display: inline-block;
float: right;
}
I would like to force the width of the green divto be as big as possible, according to the width of the red one. The width of the red divcan vary according to div's content. So, for example, if the width of the red divis 150px, the width of the green one should be 250px. This should always be true:
我想强制绿色的宽度div尽可能大，根据红色的宽度。红色的宽度div可以根据div的内容而变化。因此，例如，如果红色的宽度div为 150px，则绿色的宽度应为 250px。这应该总是正确的：
green div width + red div width = 400px
How could I achieve this using CSS ?
我如何使用 CSS 实现这一点？
No Javascript please...
没有Javascript请...
回答by Kalessin
As sandeep said earlier, but force the green div to take up as much space as possible.
正如sandeep之前所说，但强制绿色div占据尽可能多的空间。
.wrapper {
border: 1px solid black;
width: 400px;
display:table;
}
.left {
border: 1px solid green;
display: table-cell;
width: 100%;
}
.right {
border: 1px solid red;
display: table-cell;
}
Note that divs-as-tables is not supported by IE7 and below.
请注意，IE7 及更低版本不支持 divs-as-tables。
回答by sandeep
make be that's you want http://jsfiddle.net/sandeep/eGphW/
做这就是你想要的http://jsfiddle.net/sandeep/eGphW/
.wrapper {
border: 1px solid black;
width: 400px;
display:table;
}
.left {
border: 1px solid green;
display: table-cell;
}
.right {
border: 1px solid red;
display: table-cell;
}
you can use div as a table.
您可以将 div 用作表格。
