Bootstrap 3 css垂直对齐两个div一顶一底

Question

问题：所以垂直对齐问题是我在最后一列中有两个 div，我试图让一个保持在顶部，一个保持在底部，无论中心列如何增长。我可以通过使用固定高度来解决这个问题，但在这种情况下这并不好。

这是我的代码示例：JS Fiddle

HTML：

<div class="row" class="property-bundle"><!-- (x) number of these -->
    <div class="col-xs-11 wrapper">  
         <div class="row">
            <div class="col-xs-2 pull-left vendor">
              <img src="http://placehold.it/100x100" />
            </div>

            <div class="col-xs-8 properties-list">                        
              <div class="row" class="property-line">
                 <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
                 <div class="col-xs-10"><p>Flat 1</p></div>
              </div>

              <div class="row"><hr/></div>

              <div class="row" class="property-line">
                 <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
                 <div class="col-xs-10"><p>Flat 2</p></div>
              </div>

              <div class="row"><hr/></div>

              <div class="row" class="property-line">
                 <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
                 <div class="col-xs-10"><p>Flat 3</p></div>
              </div>                      
            </div>

            <div class="col-xs-2 costs"><!-- costs column -->
              <div class="row total">
                 <h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
              </div>

              <div class="row" class="fees">  <!--stay at bottom-->                  
                 <div class="col-xs-12">
                    <hr/>
                    <p class="text-right">+ Materials £300K</p>
                    <p class="text-right">+ Build £100K</p>                                
                 </div>
              </div>      
            </div>      
         </div>
      </div>
  </div>

CSS：

.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}

.vendor  {min-width: 120px;}

.properties-list {background-color: aquamarine}

.costs {vertical-align: top; min-width: 150px; vertical-align: center}

.fees {vertical-align: bottom; }

h3 {font-weight: 400}
h4 {color: green}

.total { margin-right: 0px; }

Answer 1

您好，您可以尝试使用flexbox

我只是像这样更改您的 html：

<div class="col-xs-2 costs">
                <!--stay at top-->
        <div class="total">
           <h3 class="text-right">TOTAL: £1,2M</h3>
        </div>
                    <hr/>
                <div class="materials">
                    <p class="text-right">+ Materials £300K</p>
                    <p class="text-right">+ Build £100K</p>
                </div>                                
                 </div>
              </div>      

然后我添加costs div display:flex;和total div flex-grow: 1 这个flex-grow 将把材料推到div的底部。

您只需要添加body、html、row 和costs div height:100%

这里是css：

.costs {
    vertical-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.total {
    flex-grow: 1;
}

您可以在此链接上查看示例：https://jsfiddle.net/3L5Lbwhn/9/

Answer 2

好的，我稍微简化了一点，但基本上 flex 完成了我非常需要的工作，这要感谢 Edin Puzic 让我走上了正确的道路！它还允许我固定第一个和最后一个 col 宽度，并使中间的一个动态水平。

JsFiddle

<div class="row-flex">
  <div class="col-flex-1">
    <img src="http://placehold.it/100x100" />
  </div>
  <div class="col-flex-2">
    <div class="row" class="property-line">
      <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
      <div class="col-xs-10">
        <p>Flat 1</p>
      </div>
    </div>

    <div class="row">
      <hr/>
    </div>

    <div class="row" class="property-line">
      <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
      <div class="col-xs-10">
        <p>Flat 2</p>
      </div>
    </div>

    <div class="row">
      <hr/>
    </div>

    <div class="row" class="property-line">
      <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
      <div class="col-xs-10">
        <p>Flat 3</p>
      </div>
    </div>
  </div>
  <div class="col-flex-3">

    <div class="pos-top">
      <div class="row right-text">
        TOP right
      </div>
    </div>
    <div class="pos-bottom">
      <div class="row right-text">
        <p>
          BOTTOM right
        </p>
      </div>
    </div>

  </div>
</div>

CSS

.row-flex {
  height: auto;
  display: flex;
  flex-flow: row column;
}

.col-flex-1 {
  min-width: 200px;
  border-left: 1px #ccc solid;
  flex: 0 0;
}

.col-flex-2 {
  width: 80%;
  border-left: 1px #ccc solid;
  flex: 1 1;
}

.col-flex-3 {
  min-width: 200px;
  border-left: 1px #ccc solid;
  flex: 0 0;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}

.pos-top {
  display: -webkit-flex;
  display: flex;
  height: 50%;
  width: 100%;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  background-color: yellow;
}

.pos-bottom {
  display: -webkit-flex;
  display: flex;
  height: 50%;
  width: 100%;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  background-color: green;
}

.right-text {
  text-align: right;
  width: 100%;
}