Html 具有像素和百分比宽度的 CSS 并排 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5336197/
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
CSS side by side div with Pixel and Percent widths
提问by Faizal Balsania
I have two div's (side by side) inside a parent div, i want right div to occupy 100% of remaining space (i.e. 100% - 200px) and should always stay next to left div (not below left div):
我在父 div 中有两个 div（并排），我希望右 div 占据 100% 的剩余空间（即 100% - 200px）并且应该始终保持在左 div 旁边（不低于左 div）：
<div id="wrapper" style="width: 100%;">
<div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
<div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
<div style="clear: both;"></div>
</div>回答by Salman A
Since you have only one fixed width column, float it left and that is it. As for the second column, do not specify float and width; this makes sure it is 100% wide. But you must add a left margin; otherwise the second column will interfere with the floated column e.g.
由于您只有一个固定宽度的列，因此将其向左浮动，就是这样。对于第二列，不指定浮动和宽度；这确保它是 100% 宽。但是你必须添加一个左边距；否则第二列会干扰浮动列，例如
- aqua background will appear behind blue background (turn off the blue background to see what I mean)
- if second column becomes taller than first one, additional content will start appearing below the first column.
- 浅绿色背景将出现在蓝色背景后面（关闭蓝色背景以了解我的意思）
- 如果第二列变得比第一列高，其他内容将开始出现在第一列下方。
<div id="wrapper">
<div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
<div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
<div style="clear: both;"></div>
</div>回答by erickb
make the parent wrapper float. Also you would probably want to remove the width: 100%in the second child div. And have its width set by the amount of content inside. Or you could have percentage for both child divs. Example 30%and 70%.
制作父包装器float。此外，您可能希望删除width: 100%第二个子 div 中的 。并根据里面的内容量设置其宽度。或者你可以有两个子 div 的百分比。示例30%和70%.
回答by Hussein
Add position properties to your right div. Left div 200px and right div occupies remaining space.
将位置属性添加到您的右侧 div。左 div 200px 右 div 占用剩余空间。
#right{
background-color:Aqua;
height:100px;
position:absolute;
top:0;
right:0;
left:200px;
}
Check working example at http://jsfiddle.net/EpA5F/1/
在http://jsfiddle.net/EpA5F/1/检查工作示例
回答by Guillaume Schuermans
Ok, so on newer browsers we will be able to use display: box; and box-flex: 1,... properties. I am currently using this in a webproject where only Chrome is required, so this new CSS3 thing, solved a lot of issues for me.
好的，所以在较新的浏览器上我们将能够使用 display: box; 和 box-flex: 1,... 属性。我目前在一个只需要 Chrome 的网络项目中使用它，所以这个新的 CSS3 东西为我解决了很多问题。
回答by Colin Wiseman
The accepted answer is good, but I had an issue where the right column underlapped my subnavigation as it was floating as well.
接受的答案很好，但我遇到了一个问题，即右栏与我的子导航重叠，因为它也是浮动的。
With modern browsers you can now have all elements floating and get the same effect with cooler CSS. Using "width: calc(100% - 380px);" means you can float your elements, get them positioned properly, and look cool...
使用现代浏览器，您现在可以让所有元素浮动，并使用更酷的 CSS 获得相同的效果。使用 "width: calc(100% - 380px);" 意味着你可以浮动你的元素，让它们正确定位，看起来很酷......
.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }
回答by ZuzEL
If you want right divto have constant width:
如果你想div拥有恒定的宽度：
<div style="position:relative">
<div class='wrapper'>
<div style="width: 70%"></div>
<div style="width: 20%"></div>
<div style="width: 10%"></div>
<div style="clear:both"></div>
</div>
<div class="constant-width"><div>
</div>
And CSS
和 CSS
.wrapper{
margin-right: CONSTANTpx;
}
.wrapper div{
float:left;
}
.constant-width{
top: 0px; right:0px; position:absolute;
width: CONSTANTpx
}
Works good without borders
无国界运作良好
回答by Guillaume Schuermans
your left div should have float left and its pixel width using position relative. Your right div should only have position relative and maybe an overflow hidden. This should fix your problem. No need to use the use the div that clears the float.
您的左侧 div 应该使用相对位置向左浮动和像素宽度。您正确的 div 应该只有相对位置，并且可能隐藏了溢出。这应该可以解决您的问题。无需使用清除浮动的 div。
