Как разместить элементы в макете кладки, например, в журнале / газете? - PullRequest
Новая
       35

Как разместить элементы в макете кладки, например, в журнале / газете?

3 голосов
/ 28 ноября 2011

Я пытаюсь создать макет, в котором элементы будут плавать как разделы газетных / журнальных статей. Это похоже на то, что делает масонство jQuery . Но я пытался добиться этого только с помощью CSS3. Я подумал, что, возможно, свойство отображения box сможет это сделать. Хотя после нескольких попыток я не смог заставить элементы скользить по ширине родительского столбца, как было выполнено.

Есть ли способ достичь этого макета только с помощью CSS?

Разметка будет выглядеть примерно так: 

<article>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
</article>

Здесь секция будет перемещаться влево и настраиваться в очереди столбцов там, где она лучше подходит (а не ниже базовой линии предыдущего, как это делает простой float).

1 Ответ

4 голосов
/ 28 ноября 2011

Это возможно, используя CSS-столбцы. Здесь - хорошее объяснение.

CSS: 

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }

HTML: 

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>

Кроме того, я нашел этот сайт с помощью поиска "CSS Masonry" в Google. Это был второй результат.

...