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

Question

Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.

Here is my code example : 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>

然后我加上costsdivdisplay:flex;和totaldivflex-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;
}

你可以看到这个 link 的例子：https://jsfiddle.net/3L5Lbwhn/9/

Answer 2

好的，我稍微简化了一点，但本质上 flex 做了我需要的，非常感谢 Edin Puzic 让我走上了正确的道路！它还允许我修复第一个和最后一个列的宽度，并使中间的列也水平动态。

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%;
}

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

Boostrap 3 css vertical align two divs one top one bottom

css

vertical-alignment

word-wrap

twitter-bootstrap-3

responsive