如何使列的下边缘对齐到同一级别？

Question

我有一个关于显示一组列的问题，以便列的底部处于同一级别。

http://jsfiddle.net/arieanneke/s0g4oese/

#wrapper {
    width: 250px;
}

.column {
    background-color: red;
    height: 100px;
    width: 50px;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px
}

.column_long {
    background-color: blue;
    height: 210px;
    width: 50px;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px
}

所以问题是，如何使蓝色柱的底部与红色柱相同？

问题是长蓝柱正在向下冲3个红色柱。

亲切的问候，

阿瑞

Answer 1

这不是我如何解决的问题（而是看flex-box或CSS tables但是，你所拥有的只能纠正为：

#wrapper {
    width: 250px;
}
.column, .column_long {
    display:inline-block;
    background-color: red;
    height: 100px;
    width: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.column_long {
    background-color: blue;
    float: right;
    height: 214px;
}

e.g。 http://jsfiddle.net/s0g4oese/6/

或使用css-tables ...

#wrapper {
    width: 250px;
    display:table;
    position:relative;
    border-collapse: separate;
    border-spacing: 10px;
}

.row {
    width: 250px;
    display:table-row;   
    height: 100px;
}

.column, .column_long {
    background-color: red;
    display:table-cell;
    width: 50px;
}

.column_long {
    background-color: blue;
    position:absolute;
    top:10px; bottom:10px;
}

<div id="wrapper">
    <div class="row">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column_long"></div>
    </div>
    <div class="row">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
</div>

Answer 2

将float:right添加到.column_long

＆＃13;

＆＃13;

#wrapper {
  width: 250px;
}
.column {
  background-color: red;
  float: left;
  height: 100px;
  width: 50px;
  margin-right: 10px;
  margin-bottom: 10px
}
.column_long {
  background-color: blue;
  float: right;
  height: 210px;
  width: 50px;
  margin-right: 10px;
  margin-bottom: 10px
}

＆＃13;

<div id="wrapper">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column_long"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

以下是使用flex-box的解决方案。

注意......我在这里更改显示顺序作弊。

＆＃13;

＆＃13;

#wrapper {
    width: 250px;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:flex-end;
    height: 220px; /* required */
}

.column {
    background-color: red;
    height: 100px;
    width: 50px;
    margin-right: 10px;
    margin-bottom: 10px
}

.long {
    background-color: blue;
    height: 210px;
    order:2; /* make this one last */

}

＆＃13;

<div id="wrapper">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column long"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

＆＃13;

＆＃13;

＆＃13;