Html 使用内嵌块div处理不同高度

我在一个样式化的blockquote中有一些

s。我已经在

s中设置了最大宽度和内联块，这样当屏幕有足够的宽度时，它可以将多个

div

s放置在同一y位置

我还在

div

s之间设置了一些填充物，因此即使它们粘在一起，也看起来很不错

但这里有一个问题，如果在同一y位置上有多个

div

s，当下一个div必须“在下一行”时，y位置将位于高度最高的div下方

当前：

期望值：

这些图片是在JSFIDLE中捕获的，下面是链接：

---

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>

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";
}

---

如果数据都是静态的，css可以很容易地做到这一点。 请检查此源代码：

我添加了以下几种样式，并删除了一些内联样式：

.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;
}

---

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

不要认为有一个纯粹的CSS解决方案，你必须考虑使用一些JS/JQueY.块引用的宽度是基于长度的，我希望它适合浏览器的宽度。（即，如果div的宽度不能在同一行中，请转到下一行，但尽可能保持y位置为顶部）。因此，硬编码不是我需要的解决方案。我理解，也许您需要考虑jQuery插件。请检查链接：