Как установить маржу-верхнюю и левую авто?

Question

Я создал поле с котировками, и я показываю 12 котировок на одной странице (по 3 на строку), но поскольку цитаты могут быть небольшими или длинными, я хочу сохранить маржу фиксированной сверху и слева.

Живой пример здесь >>http://fun2ush.com/quotations-by/abraham-lincon/, цитаты отображаются здесь и там.

Ниже CSS я использую:

.blockquote { 
     width: 300px; 
     overflow: hidden; 
     position: relative; 
     background: #ffffff; 
     font - family: Georgia, 
     serif; 
     font - size: 18px; 
     font - style: italic; 
     margin: 0.25em 0; 
     padding: 0.25em 40px; 
     line - height: 1.45; 
     color: #100202; 
     border-radius: 1px 47px 0px 47px; 
     -moz-border-radius: 1px 47px 0px 47px; 
     -webkit-border-radius: 1px 47px 0px 47px; 
     border: 2px solid # 4f4f4f; 
    } 
    .blockquote p { 
      color: #000000; 
    } 
    .blockquote:before { 
     display: block; 
     content: "\201C"; 
     font-size: 80px; 
     position: absolute; 
     left: -8px; 
     top: -20px; 
     color: # 00A0DA; 
    } 
.wallpaper-box{float:left; margin:0px 15px 30px 15px; width:300px;} 

HTML-

<div class="wallpaper-box"> 
    <div class="blockquote"> 
     <a href="<?php the_permalink();?>"> <?php the_excerpt(); ?> </a> 
      <div class="fb-like-box"> 
       <div class="fb-like" data-href="<?php the_permalink();?>" data-width="280" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"> 
       </div> 
      </div> 
    </div> 
</div> 

Answer 1

Если вы хотите, чтобы достичь этого в чистом CSS, посмотрите на эту скрипку: http://jsfiddle.net/gabrieleromanato/tQANc/

он использует

column-count: 3; 
column-gap: 3%; 
column-width: 30%; 

для того, чтобы достичь этого макета. Это не будет поддерживаться на старых браузерах, хотя (для более старых браузеров, вы можете Откат на кладке)

Реализовано для кода (на примере 3-х столбцов):

.wallpaper-box{ 
    column-count: 3; 
    column-gap: 20px; 
    column-width: 200px; 
    min-width: 660px; /* add margins and paddings to calculate width */ 
} 

Answer 2

Я знаю, что это не отвечает на ваши вопросы с помощью CSS, но это JS библиотека удивительно для делать то, что вы находясь в поиске.

http://masonry.desandro.com/

Answer 3

Идущий по выражению страницы твоего, мое предложение было бы использовать Masonry Plugin как его пугающе аккуратно и делает именно то, что вы хотите (я предполагаю, что котировки являются динамичными по ширине и высоте)

Или по умолчанию CSS путь будет использовать то, что было предложено KristofFeys или этим Fiddle (хотя его метод является более чистым в предположении, счетчик колонки ограничен)

HTML

<div class="quote"> 
    <div class="one" style="border:1px solid #000">one</div> 
    <div class="three" style="border:1px solid #000"> three three three</div> 
<div class="five" style="border:1px solid #000">five five five five five five five five five five five five five five five five five five five five five five five five five </div> 
    <div class="seven" style="border:1px solid #000">seven seven seven seven seven seven seven </div> 
</div> 
<div class="quote"> 
    <div class="two" style="border:1px solid #000">two two</div> 
    <div class="four" style="border:1px solid #000">four four four four </div> 
    <div class="six" style="border:1px solid #000">six six six six six six </div> 
    <div class="eight" style="border:1px solid #000">eight eight eight eight eight eight eight eight </div> 
</div> 

CSS

.quote { 
    float: left; 
    width: 300px; 
}