Question

我一直试图让3 <div>在父母<div>的底部彼此相邻。由于我使用Bootstrap col-md-3，浮动自动进行。我在互联网上搜索了解决方案，但我找不到能解决问题的方法。

我以为我创造了一个没有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

垂直对齐仅适用于内联块元素，浮动元素忽略垂直对齐属性

使用 display: inline-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>

vertical-align：bottom

*{
  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>

在Bootstrap页面底部浮动div

1 个答案: