Html 如何将两个容器放置在一个容器下方，以便它们填充容器

我有三个div在一个容器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>

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;
}

---

有没有办法做到这一点？

定义此

框大小：边框框

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

您的
#div2
或
#div3
宽度为
50%+边框左宽度+边框右宽度

50%+1px+1px

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

更多关于
定义此
框大小：边框框

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

您的
#div2
或
#div3
宽度为
50%+边框左宽度+边框右宽度

50%+1px+1px

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

更多关于
看看这把小提琴。给你修好了


我给了3个div周围的div 100%的宽度

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

看看这把小提琴。给你修好了


我给了3个div周围的div 100%的宽度

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

这可能对你有帮助


div{
边框：1px纯黑；
框大小：边框框；
}
#第一组{
浮动：左；
宽度：100%；
背景色：红色；
}
#第二组{
浮动：左；
宽度：50%；
背景颜色：绿色；
}
#第三组{
浮动：左；
宽度：50%；
背景颜色：黄色；
}

第一组
第二组
第三组


这可能会对您有所帮助


div{
边框：1px纯黑；
框大小：边框框；
}
#第一组{
浮动：左；
宽度：100%；
背景色：红色；
}
#第二组{
浮动：左；
宽度：50%；
背景颜色：绿色；
}
#第三组{
浮动：左；
宽度：50%；
背景颜色：黄色；
}

第一组
第二组
第三组


它可以在没有边界的情况下工作。但不幸的是，我需要边界，没有边界也行。但不幸的是，我需要边界停留。对不起，修复了链接。我粘贴了最初的小提琴。但他在对他的问题的评论中说，他需要边界保持：）@RFLdev另一个边界仍然存在，但内部边界已经消失。是的，当我发布这篇文章时，评论并不在问题之下。所以我当时不知道。对不起，修复了链接。我粘贴了最初的小提琴。但他在对他的问题的评论中说，他需要边界保持：）@RFLdev另一个边界仍然存在，但内部边界已经消失。是的，当我发布这篇文章时，评论并不在问题之下。所以我当时不知道。如果有人想多读一篇文章：如果有人想多读一篇文章：我没有投反对票，但这同一个答案是在你8分钟前由Rohit Azad发布的。如果问题解决了，答案可能是一样的，那可能是巧合我没有投反对票，但是这个答案在你之前8分钟由Rohit Azad发布。如果问题解决了，那么答案可能是相同的，这可能是巧合