CSS列对齐问题

Question

我正在使用CSS创建三列。我想模仿一下pintrist的作用。它有效，但存在轻微的对齐问题。

如您所见，顶部未完全对齐。

我的CSS框

.formBox{
    width:238px;
    height:auto;
    background-color:white;
    box-shadow:0 0 5px rgba(0,0,0,0.1);
    margin-bottom:35px;
    display: inline-block;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
}

我的网格布局CSS

#homepageIndent{
    float:left;
    margin-top:30px;
    width:100%;
    -webkit-column-count: 3;
    -webkit-column-fill: auto;
    -webkit-column-gap:10px;
    -moz-column-count: 3;
    -moz-column-fill: auto;
    -moz-column-gap: 10px;
     column-count: 3;
     column-fill: auto;
     column-gap:10px;
}

我的HTML

<div id="homepageIndent">
    <div class="formBox">
        <a href="link">
            <div class='thumbnailImage' style="background-image:url('imagelink');"></div>
        </a>
        <div class="description">
            <a href="link">title</a>
        </div>
        <div class="tagsContainer">
            <a href="link">
                <div class="tag">
                    tag
                </div>
            </a>
        </div>
    </div>
</div>

Answer 1

如果您的页面是固定宽度，请尝试这样的操作：

<div class="clearfix"></div>
<div class="wrapper">
    <div class="col first">
      <a href="link">
        <img url="imagelink" />
       </a>
    </div>
    <div class="col">
        <a href="link">title</a>
    </div>
    <div class="col last">
        <a href="link">title</a>
    </div>
</div>    
<div class="clearfix"></div>

和CSS：

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;

}

.wrapper {
    width: 770px; // content full width = 3*col width + 4*col side margin
    background: #ededed;
    border: 1px solid #ccc;
    overflow: hidden;
}

.col {
  float: left;
  width: 230px;  
  margin: 10px 0px 10px 20px; // top, right, bottom, left margin
  background: #ccc;  
}

这是小提琴：http://jsfiddle.net/Pxuk5/