Мне нужно показывать данные результатов поиска на моем сайте по горизонтали. Я слежу за подходом к пользовательскому интерфейсу для моего веб-сайта, поэтому я хочу, чтобы данные перемещались горизонтально, а не вертикально.
То, что мне нужно, показано на рисунке ниже:
Приведенные данные являются динамическими. Я хочу нарисовать divs по вертикали сначала на основе родительской высоты div, а затем горизонтально. Что-то похожее на панель WPF wrap, но я еще не смог ее достичь.
Это то, что я пробовал, рисуя горизонтально, а затем вертикально:
Fiddle: http://jsfiddle.net/4wuJz/2/
HTML:
<div id="wrap">
<div id="wrap1">
<div class="result">
<div class="title">1</div>
<div class="postcontent">
<p>Test</p>
</div>
</div>
<div class="result">
<div class="title">2</div>
<div class="postcontent">
<p>Test</p>
</div>
</div>
</div>
</div>
CSS
#wrap {
width:100%;
height: 500px;
background-color: rgba(0,0,0,0.5);
overflow:scroll;
overflow-y:hidden;
}
#wrap1 {
width:2500px;
height:500px;
text-align: center;
}
.result {
width: 300px;
vertical-align: middle;
float:left;
background: rgba(120,30,20,0.5);
padding: 10px;
margin: 30px 0px 30px 30px;
}
Как я могу изменить свой код, чтобы я соответствовал желаемому результату? Любые плагины jQuery доступны для этого?