一行中有三个div，第二行中有四个div [英] Three divs in one row and fourth in the second row
问题描述
我需要在一行中有三个div，第四个div显示在这些div下面。
查看布局 http://i.imgur.com/k3TFW6b.jpg （只是插图）
我试图使用显示块为父div混合显示inline / inline-block这三个div和一些其他设置，但它总是打破第一行并在块中显示这些div。
$ b / div>
不是在div上使用 display：inline ，更简单的解决方案可能是使用 float 属性在CSS。在添加宽度和 height 的帮助下，我们可以进行复杂的布局：
html，body {margin：0; padding：0; height：100％;} body {background：＃48c;}＃container {height：50％; width：50％; margin：auto;}。rect {float：left;高度：100％; }＃box1 {width：50％;背景：＃999; }＃box2 {width：25％;背景：＃666; }＃box3 {width：25％;背景：＃333; }＃box4 {width：100％;背景：＃000; }
< body& < div id =container> < div class =rectid =box1>< / div> < div class =rectid =box2>< / div> < div class =rectid =box3>< / div> < div class =rectid =box4>< / div> < / div>< / body>
I need to have three divs in a row and fourth div displayed below these divs. See the layout http://i.imgur.com/k3TFW6b.jpg (just illustration)
I've tried to use display block for the parent div mixed with display inline/inline-block for these three divs and some other settings but it always breaks first row and displays these divs in block. Do you have any idea how to fix this?
Thanks.
Instead of using display:inline on a div, a simpler solution might be using the float property in CSS. With the help of adding a width and height we can make complex layouts:
html, body{
margin:0; padding:0;
height:100%;
}
body{
background:#48c;
}
#container{
height:50%;
width:50%;
margin:auto;
}
.rect{ float:left; height:100%; }
#box1{ width:50%; background:#999; }
#box2{ width:25%; background:#666; }
#box3{ width:25%; background:#333; }
#box4{ width:100%; background:#000; }
<body>
<div id="container">
<div class="rect" id="box1"></div>
<div class="rect" id="box2"></div>
<div class="rect" id="box3"></div>
<div class="rect" id="box4"></div>
</div>
</body>
这篇关于一行中有三个div，第二行中有四个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.imgur.com/k3TFW6b.jpg](\"http://i.imgur.com/k3TFW6b.jpg\"){kind=link}
