html - CSS 两列布局

Question

http://codepen.io/anon/pen/LFvlp

HTML

   <div class="entry-content">
  I’m not the only one in the family having a weakness for interiors. I think I received the microbe from my parents. Although our style is different on the first sight, there are still a lot of things we have in common. We both love contemporary design in combination with vintage. Also I have the love for design classics in my veins because of them.

The biggest difference is that the living room is a dark and cozy cave. But the design classics give the space that extra touch. Every time when I look at those, I discover a new detail. That makes this living room a real inspiration for me.


  <div class="post-tags">
    Chair: Hans J. Wegner, coffee table: Eames 
  </div>

</div>

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;
}

正如您在代码笔中看到的那样，我有两个 css 列。现在我希望“post-tags”div 始终与第一个 alinea 的最后一行处于同一高度。这可能吗？

Answer 1

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

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

CSS:.colfix{ visibility: hidden; }

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