Question

我在容器div中有三个div。我需要顶部div来填充整个宽度，而底部需要填充每一半。

我已经尝试过使用百分比，但是底部的两个div继续出现在另一个之上。

标记：

<div>
    <div id="div1">DIV1</div>
    <div id="div2">DIV2</div>
    <div id="div3">DIV3</div>
    <br style="clear:both;" />
</div>

CSS：

div{
    border:1px solid black;
}

#div1{
     float:left; 
    width:100%;
    background-color:red;
}

#div2{
     clear:both;
     float:left;  
    width:50%;
    background-color:green;
}

#div3{
     float:left;
    width:50%;
    background-color:yellow;
}

See on jsfiddle

有办法做到这一点吗？

Answer 1

定义此box-sizing:border-box;

因为您使用边框#div2定义#div3或50%宽度solid 1px

比您的#div2或#div3宽度为50%+border-left-width+border-right-width

<强> 50％+ + 1像素1像素

div{
    border:1px solid black;
    box-sizing:border-box;
}

更多关于box-sizing

Answer 2

看看这个小提琴。为你修好了。

https://jsfiddle.net/639fzg65/9/

我给了围绕3个div的div宽度为100％

#container{
  border:1px solid black;
  width: 100%;
}

Answer 3

这可能对你有帮助..

＆＃13;

div {
  border: 1px solid black;
  box-sizing: border-box;
}
#div1 {
  float: left;
  width: 100%;
  background-color: red;
}
#div2 {
  float: left;
  width: 50%;
  background-color: green;
}
#div3 {
  float: left;
  width: 50%;
  background-color: yellow;
}

＆＃13;

<div>
  <div id="div1">DIV1</div>
  <div id="div2">DIV2</div>
  <div id="div3">DIV3</div>
  <br style="clear:both;" />
</div>

＆＃13;

如何在一个div下面放置两个div，以便它们填充容器

3 个答案: