html - Bootstrap 中页面底部的 float div

Question

我一直在尝试获取 3 <div>在 parent 的底部并排 float <div> .由于我使用的是 Bootstrap col-md-3，所以 float 会自动进行.我在 Internet 上搜索了解决方案，但找不到任何解决我的问题的方法。

我想我会在没有 Bootstrap 的情况下创建一个，而且效果很好: http://jsfiddle.net/6vbpmkgh/

这是一个简单的设置，但是当我在我的代码中实现它时它不起作用。

<div class="option-list">
   <div class="col-md-3 col-md-offset-1 pakketten">
      <p>Test1</p>
      <p>Test2</p>
   </div>
   <div class="col-md-3 col-md-offset-1 pakketten">
      <p>Test1</p>
   </div>
   <div class="col-md-3 col-md-offset-1 pakketten">
     <p>Test1</p>
     <p>Test2</p>
   </div>
</div>

中间可以看到<div>内容较少，因此应该更小但仍位于底部。 (查看 jsfiddle 链接以获得视觉效果)

Answer 1

垂直对齐仅适用于行内 block 元素， float 元素忽略垂直对齐属性

使用显示:内联 block

vertical-align: top;

*{
  padding: 0;
  margin: 0;  
}


div{
  text-align: center;
}
div > div{
  display: inline-block;
  vertical-align: top;
  width: 30%;
  background: #ccc;
  min-height: 250px;
}


div.small{
  min-height: 100px;
  background: #999;
}

<div>
  <div>div</div>
  <div class="small">div small</div>
  <div>div</div>
</div>

vertical-align: middle;

*{
  padding: 0;
  margin: 0;  
}


div{
  text-align: center;
}
div > div{
  display: inline-block;
  vertical-align: middle;
  width: 30%;
  background: #ccc;
  min-height: 250px;
}


div.small{
  min-height: 100px;
  background: #999;
}

<div>
  <div>div</div>
  <div class="small">div small</div>
  <div>div</div>
</div>

垂直对齐:底部

*{
  padding: 0;
  margin: 0;  
}


div{
  text-align: center;
}
div > div{
  display: inline-block;
  vertical-align: bottom;
  width: 30%;
  background: #ccc;
  min-height: 250px;
}


div.small{
  min-height: 100px;
  background: #999;
}

<div>
  <div>div</div>
  <div class="small">div small</div>
  <div>div</div>
</div>