Html 在 2 个 div 中拆分屏幕并在 css 中使用剩余空间设置第二个宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9475773/
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
Split screen in 2 divs and set second width with remaining space in css?
提问by Pier-Alexandre Bouchard
I have 2 block-inline divs.
我有 2 个块内联 div。
I don't wan't to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.
我不想指定第一个的宽度，但是，我希望第二个占用 100% 的剩余空间。两个 div 的容器占据了我屏幕的 100%。
It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.
似乎可以使用 jQuery 来确定第一个 div 的宽度并设置第二个值，但我想在纯 css 中进行。
How can I do that ?
我怎样才能做到这一点 ？
回答by Bert
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.div2 {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear">
</div>Hope it helped.
希望它有所帮助。
回答by Dips
If you don't want to use jquery then this might worth doing
如果你不想使用 jquery 那么这可能值得做
<div style="width:100%;">
<div style="float:left; display:inline-block;" class="div1">left div</div>
<div style="float:right; display:inline-block;" class="div2">right div</div>
</div> ?
