将文章列表分为三列

Question

我想知道是否有创建css规则的方法来显示三列中的文章，如图所示（http://i.stack.imgur.com/XRSGs.png）。首选HTML标记为：

<div>1</div>
<div>2</div>
<div>3</div>
...
<div>6</div>

唯一的条件是在渲染过程中避免使用html-markup进行额外操作 - 没有嵌套块等等。有什么想法吗？

请参阅JSFiddle上的代码：jsfiddle.net/3nv7rkcg

Answer 1

很难用css制作，它不能动态。所以最好使用js http://isotope.metafizzy.co/。

现在我们也可以从css中创建它：）

这是代码

＆＃13;

＆＃13;

@import "compass/css3";

*, *:before, *:after {box-sizing:  border-box !important;}


article {
 -moz-column-width: 13em;
 -webkit-column-width: 13em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em; 
  
}

section {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}


p {
 margin:  1rem 0; 
}




/*  styles for background color, etc; not necessary for this thing to work  */



body {
 padding:  1em;
 font-family:  "Garamond", serif; 
}




h1 {
  font-size:  3rem;
  font-weight:  800;
}

body {
  line-height:  1.25;
}


p {
 text-align:  left;
}

＆＃13;

<article>

  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
  </section>

  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
  </section>


  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat  architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
  </section>
  
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
  </section>
  
</article>

＆＃13;

＆＃13;

＆＃13;