2014-11-02 90 views
2

http://codepen.io/anon/pen/LFvlpCSS两列布局

HTML

​​

CSS

.entry-content { 
     -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
     -moz-column-count: 2; /* Firefox */ 
     column-count: 2; 

     -webkit-column-gap: 30px; /* Chrome, Safari, Opera */ 
     -moz-column-gap: 30px; /* Firefox */ 
     column-gap: 30px; 
    } 

.post-tags { 
    margin-top: 15px; 
} 

正如你可以在codepen看到我有两个CSS列。现在我想让'post-tags'div始终与第一个alinea的最后一行高度相同。那可能吗?

+0

你的意思是说,你需要在第一栏和第二中第二个div的第一个div柱? – TheGaME 2014-11-02 10:11:51

+0

你为什么不直接发送'post-tags' div到外部? – 2014-11-02 10:12:21

+0

不,我希望第二列的高度与第一列完全相同(或者稍短一点也不错)。现在,正如你所看到的,第二列作为第一列更长一点(主要是当我让我的屏幕更小) – user3071261 2014-11-02 10:13:40

回答

1

.post-tags之后插入另一个元素:这会强制渲染器在计算列时考虑margin-top

HTML:<div class="colfix">0</div>(不能为空)

CSS:.colfix{ visibility: hidden; }

演示:http://codepen.io/anon/pen/Dmwjc