使用内联块DIV处理不同的高度

Question

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

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

但这是一个问题，如果在同一个y位置上有多个div s，当下一个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

我添加了一些如下所示的样式并删除了一些内联样式：

system()

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