Question

我正在尝试在div中创建一个3列div。

我有类似

的东西

<div class="text-center">
   <div class="wrapper">
        <h5>title 1</h5>
       <div>
          item 1  
       </div>
       <div>
          item 2  
       </div>
   </div>

   <div class="wrapper">
        <h5>title 2</h5>
       <div>
          item 1  
       </div>
       <div>
          item 2  
       </div>
       <div>
          item 3
       </div>
   </div>

   <div class="wrapper">
        <h5>title 3</h5>
       <div>
          item 1  
       </div>
       <div>
          item 2  
       </div>
       <div>
          item 3  
       </div>
       <div>
          item 4  
       </div>
       <div>
          item 5
       </div>
   </div>
</div>

CSS

.wrapper {
    display: inline-block;
    margin: 15px;
}

由于某些原因，title 1和tile 2列项目是垂直对齐bottom。我希望让所有三列垂直对齐top。我需要display:inline-block样式而不是float，因为它会让我搞砸其他事情。我该怎么做？

感谢。

http://jsfiddle.net/f54Hh/

Answer 1

只需将vertical-align: top;添加到您的包装类：

.wrapper {
    display: inline-block;
    margin: 15px;
    vertical-align: top;
}

工作JSfiddle

如何在我的情况下垂直对齐顶部

1 个答案: