用 CSS 内的元素打断的列

Question

我正在处理 5 列，但其中的元素被破坏了。我试图解决这个问题，但我没有运气。

CSS:

.test-wrap {    
 -webkit-columns: 5;
 -moz-columns: 5;
 columns: ;
}

.test-wrap .img {
 display: block;
 margin: 0 0 0.75em;
}

HTML:

<div class="test-wrap">
 <div class="iefsv1"><img src="#" class="home-img"/>
  <h3><strong style="line-height: 2.50em;">1. Shop </strong></h3>
   Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
   <br />
   <a class="buttonv3" href="#">Go to</a>
</div>
<div class="iefsarrowv1"><img src="#"/></div>
<div class="iefsarrowv1"><img src="#"/></div>
<div class="iefsv2"><img src="#" class="home-img"/>
 <h3><strong style="line-height: 2.50em;">2. Downpayment</strong></h3>
  Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
  <br />
  <a class="buttonv3" href="#">Go to</a>
</div>
<div class="iefsarrowv2"><img src="#"/></div>
<div class="iefsv3"><img src="#" class="home-img"/>
 <h3><strong style="line-height: 2.50em;">3. Spread</strong></h3>
 Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
 <br />
 <a class="buttonv3" href="#" target="_blank">Go to</a>
 </div>
</div>

Answer 1

您应该使用 display: inline-block 或 float: left 尝试此操作（您也不需要 css3 来实现 5 列，旧浏览器不支持它..）。负边距是个坏主意..

.test-wrap {
  width: 100%;

}
.test-wrap > div {
  float: left;
  width: 20%;
}

或

.test-wrap {
  width: 100%;
  font-size: 0;
}
.test-wrap > div {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  width: 20%;
}

用 CSS 内的元素打断的列

Columns broken with element inside CSS

html

css

css-multicolumn-layout