当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to expand column height automatically and vertically align its contents?

问题描述:

I am trying to expand the height of first three col-md-1 divs to the rows maximum height which is expanded by two col-md-5, and also vertically align its contents. I am using grid system from bootstrap.

<div class="row load-container">

<div class="col-md-1">{{Id}}</div>

<div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>

<div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>

<div class="col-md-5 container">

<div class="row">{{From.Name}}</div>

<div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>

<div class="row">{{pickupFormatted}}</div>

</div>

<div class="col-md-5 container">

<div class="row">{{To.Name}}</div>

<div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>

<div class="row">{{deliveryFormatted}}</div>

<div class="row">{{expectedFormatted}}</div>

</div>

<div class="col-md-1">

{{Weight}}

</div>

<div class="col-md-2">

{{Distance.text}}

</div>

<div class="col-md-2">

{{Duration.text}}

</div>

<div class="col-md-4">

</div>

</div>

Edit:

Here is the method the sort-of works, except that the column widths are no longer affecting actual width.

.load-container {

padding: 5px;

display: table;

width: 100%;

}

.load-container [class*="col-"] {

float: none;

display: table-cell;

vertical-align: middle;

text-align: left;

}

Ninja-edit:

This seems to work now

.load-container [class*="col-"] {

float: none;

display: table-cell;

vertical-align: middle;

}

分享给朋友:
您可能感兴趣的文章:
随机阅读: