一行三个div，第二行第四个答案

【问题标题】：Three divs in one row and fourth in the second row一行三个div，第二行第四个
【发布时间】：2015-06-02 18:31:39
【问题描述】：

我需要连续三个 div 并在这些 div 下方显示第四个 div。见布局http://i.imgur.com/k3TFW6b.jpg（只是插图）

我尝试将父 div 的显示块与这三个 div 的显示内联/内联块和其他一些设置混合使用，但它总是打破第一行并以块的形式显示这些 div。你知道如何解决这个问题吗？

谢谢。

【问题讨论】：

你尝试运行什么代码？您可以编辑您的问题以包含更多信息。

标签： html css

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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

HTML

.Row 
{
    display: table;
     width: 100%;
     table-layout: fixed;
     border-spacing: 7px; 
} 

.Column 
{
     display: table-cell;
     background-color: gray; 
}

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

【讨论】：