如何在杂志/报纸等砌体布局中浮动元素？ [英] How to float elements in a masonry layout like magazine/newspaper?

问题描述

我试图实现一个布局，其中的项目将浮动像报纸/杂志文章部分。这与 jQuery的砌体相似。但我试图达到只使用CSS3。我想也许框显示属性可以做到这一点。虽然在尝试了几次之后，我无法在完成父列宽度后将项目向下滑动。

有什么方法可以实现这种布局使用CSS？

标记可能是这样的：

pre $ <物品>
< section> ...< / section>
< section> ...< / section>
< section> ...< / section>
< section> ...< / section>
< / article>


在这里，一个部分会向左浮动并在列队列中进行自我调整，前一个的基线，就像简单的float一样）。

解决方案

使用CSS列是可能的。 这里是一个很好的

CSS：

  div {
  - moz-column-count：3; 
 -moz-column-gap：10px; 
 -webkit-column-count：3; 
 -webkit-column-gap：10px; 
列数：3; 
 column-gap：10px; 
 width：480px; } 
 
 div a {
 display：inline-block; / *显示行内块，绝对没有FLOATS！ * / 
 margin-bottom：20px; 
宽度：100％; } 
  

HTML：

 < DIV> 
< a href =＃>无论你想在这里放什么东西。图片，文字，电影，你有什么。不，真的是什么！< / a> 
 ...等等等等。 
< / div> 
  

另外，我通过在Google上搜索CSS砌体这是第二个结果。

I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled.

Is there any way to achieve this layout only using CSS?

The markup would be something like this:

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

Here a section would float left and adjust itself on the columns queue where better fit (and not bellow the baseline of the previous one, as simple float does).

解决方案

It's possible using CSS columns. Here is a good explanation.

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>

Also, I found this site by searching "CSS Masonry" on Google. It was the second result.

这篇关于如何在杂志/报纸等砌体布局中浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！