CSS 布局 - 三列，中间列包含两个框

Question

我当前的布局如下所示:https://gyazo.com/5ed712dcea7d207b511220e3c73185da

我将 A、B 和 C 放在同一个 div 中并给它们赋予了相同的类名，然后用这个做了一个 .css 文件:

.classname{
    display: inline-block;
    width: 32%;
    vertical-align: top;
}

但我想将 D 添加到 B 的底部，因此布局如下所示: https://gyazo.com/4e8cb4cfd3f4011d359bc1e25b717ff1

有办法吗？

谢谢!

Answer 1

Flexbox 可以解决这个问题。你可以做的一种方法是这样做，看看下面的代码。但如果您不想成为这样，那么您不妨看看砌体布局。

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.elem-left, .elem-right {
   width: 200px;
   border: 1px solid #000;
}
.elem-left{
  border-right: 0;
}
.elem-right{
  border-left: 0;
}
.elem {
    border: 1px solid #000;
    position: relative;
}
.flex-column {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.flex-column>.elem:first-of-type{
  border-bottom: 0;
}
.elem p {
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
}

<div class="container">
  <div class="elem-left"></div>
  <div class="flex-column">
    <section class="elem">
      <p>
        Flexbox is so easy!
      </p>
    </section>
    <section class="elem">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget.
      </p>
    </section>
  </div>
  <div class="elem-right"></div>
</div>