Question

我需要连续使用三个div，并在这些div下面显示第四个div。查看布局http://i.imgur.com/k3TFW6b.jpg（仅插图）

我尝试将显示块用于显示内联/内联块的父div与这三个div以及其他一些设置，但它总是会破坏第一行并在块中显示这些div。你知道如何解决这个问题吗？

感谢。

Answer 1

而不是在div上使用display:inline，更简单的解决方案可能是在CSS中使用float属性。在添加width和height的帮助下，我们可以制作复杂的布局：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

简单有效的解决方案是CSS表格布局

HTML

＆＃13;

.Row 
{
    display: table;
     width: 100%;
     table-layout: fixed;
     border-spacing: 7px; 
} 

.Column 
{
     display: table-cell;
     background-color: gray; 
}

＆＃13;

<div class="Row">
     <div class="Column">First</div>
     <div class="Column">Second</div>
     <div class="Column">Third</div> 
</div> 
<div class="Row">
     <div class="Column">Fourth</div>
     <div class="Column">Fifth</div>
     <div class="Column">Sixth</div> 
</div>

＆＃13;

一行中有三个div，第二行中有四个

2 个答案: