Работа с разной высотой с встроенными блоками DIVs

Question

У меня есть <div> s в стиле blockquote. Я установил max-width и inline-block в <div> s, чтобы он мог разместить несколько div s в одном и том же положении, когда экран имеет достаточную ширину.

Я также установил некоторые прокладки между div, поэтому он по-прежнему выглядит очень хорошо, даже если они держатся вместе.

Но вот проблема: если в одном и том же положении есть несколько 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

я добавил несколько стилей, как показано ниже, и удалить некоторые встроенные стили:

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

Если это то, что вы собираетесь делать, вы можете настроить размеры ширины.