块元素的自动布局

Question

我的布局类似于以下一个：

#first {
  height: 100px;
  float: left;
}
#second {
  height: 200px;
  float: left;
}
#third {
  height: 100px;
  float: left;
}
.column {
  background: red;
  width: 200px;
  margin: 5px
}

<div id="parrent">
  <div id="first" class="column">
    FIRST
  </div>
  <div id="second" class="column">
    SECOND
  </div>
  <div id="third" class="column">
    THIRD
  </div>
</div>

当我们有足够的空间时，看起来像这样： 这没关系。

当我们没有足够的空间时，看起来像这样：

这不行。我不希望在第1和第3块之间有这个空白区域。

我希望实现这样的目标：

我该怎么做？

Answer 1

单独使用您的代码是不可能的 - 您需要为此指定至少一个媒体查询：

@media (max-width: 480px) {
    #second {
        float: right;
    }
}

您需要根据需要指定媒体查询的最大宽度。

Answer 2

仅使用CSS，无法将div对齐以占用空白区域。

如果您不想留下任何空白区域，那么您应该选择使用jQuery的砌体布局。

您可以在以下网址了解更多信息：

http://masonry.desandro.com/layout.html

我认为这就是你要找的东西。

但是，如果要在垂直列中对齐项目，则可以使用Flexbox： （这可能不是您正在寻找的答案，但我仍然想分享有一个选项可以使用flexbox垂直对齐列）

<强>样本：

http://plnkr.co/edit/zjuveUTson3C6u45nVSH?p=preview

<强> HTML：

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>

<强> CSS：

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 306px;
  width: 200px;
}
li {
  width: 100px;
  height: 100px;
  background:red;
  color: white;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  font-weight: bold;
  border: 1px solid white;
  list-style: none;
}

<强>样本：

http://plnkr.co/edit/zjuveUTson3C6u45nVSH?p=preview

Answer 3

第二种风格的变化可能会对你有所帮助

＆＃13;

＆＃13;

#first {
  height: 100px;
  float: left;
}
 
#second {
float: right;
height: 200px;
margin-right: 190px;
}
#third {
  height: 100px;
  float: left;
}
.column {
  background: red;
  width: 200px;
  margin: 5px
}

＆＃13;

<div id="parrent">
  <div id="first" class="column">
    FIRST
  </div>
  <div id="second" class="column">
    SECOND
  </div>
  <div id="third" class="column">
    THIRD
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;