html - 使用行内 block DIV 处理不同的高度

Question

我有一些 <div> s 在样式化的 block 引用中。我在 <div> 中设置了最大宽度和内联 block s 所以它可以放置多个 div当屏幕有足够的宽度时，s 在相同的 y 位置。

我还在 div 之间设置了一些填充s，所以即使它们粘在一起看起来仍然很好。

但是这里有个问题，如果有多个div s 在相同的 y 位置上，当下一个 DIV 必须“在下一行”时，y 位置将在高度最高的 DIV 下方。

当前:

预期:

图片是在jsfiddle中截取的，链接在这里:https://jsfiddle.net/gp6ua49y/

---

HTML 代码:

<blockquote>
    <div style="margin: 10px; vertical-align: top; max-width: 47%; display: inline-block;">Lorem ipsum dolor sit amet.<cite>Mr. A</cite></div>
    <div style="margin: 10px; vertical-align: top; max-width: 47%; display: inline-block;">Lorem ipsum<cite>Miss B</cite></div>
    <div style="margin: 10px; vertical-align: top; max-width: 47%; display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, ipsum sit amet tempus maximus, dolor libero volutpat mi, eu vestibulum felis eros id nisl.<cite>Mr. C</cite></div>
    <div style="margin: 10px; vertical-align: top; max-width: 47%; display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, ipsum sit amet tempus maximus, dolor libero volutpat mi, eu vestibulum felis eros id nisl. Nullam tincidunt elementum mi, nec rutrum velit vestibulum sit amet. Nunc viverra euismod efficitur. Suspendisse pharetra tincidunt fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<cite>Mr. D</cite></div>
</blockquote>

CSS 代码:

blockquote  {
    font-family: Georgia, 'whmChinese', serif;
    font-size: 18px;
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

.blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

cite:before {
    content: "\2014 \2009";
}

Answer 1

如果数据都是静态的，css可以轻松搞定。请检查此源代码: https://jsfiddle.net/csdf8euk/8

我添加了如下几个样式并删除了一些内联样式:

.holder{
  width: 700px;
}
.holder div{
  display: inline-block;
}
.a{
  padding: 10px; vertical-align: top; width: 200px;
}
.b{
  padding: 10px; vertical-align: top; width: 150px;
}
.c{
  padding: 10px; vertical-align: top; width: 250px;
}
.d{
  padding: 10px; margin-top: -100px; vertical-align: top; width: 340px;
}

如果这是你打算做的，你可以调整宽度的大小。