平行对齐 4 个 div，其中一个 div 为空答案

【问题标题】：align 4 divs in parallel where one of the divs is empty平行对齐 4 个 div，其中一个 div 为空
【发布时间】：2013-06-30 12:39:18
【问题描述】：

我是html新手，请耐心等待。

我正在尝试将 4 个 div 平行对齐，其中第一个、第三个和第四个 div 是静态的，第二个 div 是空的，我需要它占据剩余位置，例如“宽度：自动”。我不想用表来解决问题。有没有办法使用 div 解决它？

HTML：

   <div class="container">
        <div class="content" >
            first
        </div>
        <div class="empty">

        </div>
        <div class="content">
         third
        </div>
        <div class="content">
         fourth
        </div>

    </div>

CSS：

   .container{
        strong textwidth:1020px;
        height:40px;
    }

    .content{
        position:relative;
        background-color:#2cc2e7;
        height:40px;
        width:142px;
        float:right;
        margin-right:5px;
    }

    .empty{
        background-color:#f1d486;
        height:40px;
        width:auto;
        margin-right:5px;
    }

【问题讨论】：

标签： css html css-float

【解决方案1】：

您需要更改元素的顺序：

<div class="container">
  <div class="first content">first</div>
  <div class="content">third</div>
  <div class="content">fourth</div>
  <div class="empty"></div>
</div>

然后将第一个浮动到左边，另外两个浮动到右边，.empty 一个，不要浮动，而是将溢出设置为自动或隐藏。

.content {
  float: right;
  width: 142px;
}

.first {
  float: left;
}

.empty {
  overflow: auto;
}

http://jsfiddle.net/GTbnz/

【讨论】：

【解决方案2】：

如果你准备添加在空 div 下方，您可以使用以下内容：

<div class="empty">
    &nbsp;
</div>

样式表为：

.container {
    width:1020px;
    height:40px;
    display:table;
    width:100%;
}
.container div {
    height:40px;
    display:table-cell;
}
.content {
    background-color:#2cc2e7;
    width:142px;
    max-width:142px;
}
.empty {
    background-color:#f1d486;
}

这是 4 个 div 中具有“空”类的任何一个，将自动扩展以填充可用空间，其他 div 大小均为 142 像素。

【讨论】：