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

我在容器div中放置了三个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>

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

有没有办法做到这一点？

来源

2015-09-16 Urbycoz

它不工作边界。但不幸的是我需要留下边界。 – Urbycoz

定义这个box-sizing:border-box;

，因为你定义#div2或#div3宽度50%边境solid 1px

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

50％+ 1像素+ 1px的

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

更多约box-sizing

来源

2015-09-16 08:07:53

这是一篇文章，如果有人想要阅读更多：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing –

伟大的答案谢谢。 – Urbycoz

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

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

我给DIV围绕3周的div的100％的宽度

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

来源

2015-09-16 08:08:15 RFLdev

那肯定不适合我... –

对不起，修复了这个链接。我贴上了原来的小提琴。 – RFLdev

但他说，在他的问题的评论下，他需要留下边界:) –

-1

这可以帮助你..

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

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

来源

2015-09-16 08:16:23

@downvoter解释 –

我没有downvote，但这个相同的答案是在你8分钟前由Rohit Azad发布。 – Urbycoz

如果问题解决得比答案可以相同，那可能是巧合的 –

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

回答

相关问题