并排放置两个div，宽度分别为50％
[英]Positioning of 2 divs side by side each of width 50%
问题描述
I have 3 divs inside a container. 
我在一个容器中有3个div。 I want the first div to take up 100% width and the other dive to be of 50% and lie side by side below the first div. 我希望第一个div占用100％的宽度，而另一个潜水要占50％的宽度并排在第一个div下方。 however if i give 50% width and float:left to other 2 divs, the 3rd div is going below the 2nd one. 但是，如果我给50％的宽度和float：left给其他2个div，则第3个div将低于第二个div。 I tried with overflow and position also but could not get it to work. 我也尝试过溢出和位置，但无法正常工作。
CSS: CSS：
.contentC{
/*width:100%;*/
overflow:hidden;
}
#box1 {
background:#f00;
float:left;
width:100%;
}
#box2 {
background:#0f0;
float:left;
width:50%;
}
#box3 {
background:#055;
float:left;
width:50%;
}
HTML: HTML：
<body>
<div class ="contentC">
<div id="box1">Hi,Div1</div>
<div id="box2">Hi,Div2</div>
<div id="box3">Hi,Div3</div>
</div>
</body>
I've also tried with clearfix and overflow but could not get it working. 我也尝试过clearfix和overflow但无法正常工作。
2 个解决方案
解决方案1
1 已采纳 2014-07-28 20:47:31
Remove all margin and padding from box2 and box3 via padding: 0; 通过padding删除box2和box3的所有边距和填充：0; margin: 0; 边距：0;
解决方案2
0 2014-07-28 20:38:23
I'm not sure I understand the context or what its doing that is unexpected, but what you have is correct sans a left float on the first div. 我不确定我是否了解上下文或其作用，这是意外的，但是在第一个div上没有左浮点的情况下，您所拥有的是正确的。
Here is a fiddle: http://jsfiddle.net/8n4Qx/ 这是一个小提琴： http : //jsfiddle.net/8n4Qx/
#box1 {
background:#f00;
width:100%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.