底部對齊容器項與引導程序或css

Question

有沒有辦法將父div的所有容器項與bootstrap或css底部對齊。它看起來像在父母中間的每一個子項目席位：

http://www.bootply.com/Bvp8d2s04w

這裏是一個圖像，請注意用紅色和綠色背景的項目，我想他們喜歡底部與父容器對齊：

Answer 1

你可以做的容器作爲flexbox（display: flex）然後對齊所有兒童的底部與align-items: flex-end：

.form-inline { display: flex; align-items: flex-end; } 
 
.form-inline * { margin-bottom: 0; vertical-align: bottom; display: inline-block; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form novalidate="" name="categoryForm" ng-submit="vm.saveCategory()"> 
 
    <div class="form-inline" style="background-color:lightgreen;"> 
 
    <label style="display:inline;">{{ vm.category.name }}</label> 
 
    <input type="button" value="Edit" ng-click="showEditCategory()" style="margin-left:20px" class="btn btn-sm btn-default"> 
 
    <div style="display:inline" ng-show="vm.showEditCategory"> 
 
     <input type="text" ng-model="vm.category.name" id="name" name="name" class="form-control" value="{{vm.category.name}}" required=""> 
 
     <span ng-show="categoryForm.name.$error.required" class="text-warning">Name is required</span> 
 
     <input type="submit" value="Save" class="btn btn-sm btn-success" ng-disabled="categoryForm.$invalid"> 
 
    </div> 
 
    <div style="display:inline" class="label label-danger" ng-show="vm.categoryErrorMessage"> 
 
     {{ vm.categoryErrorMessage }} 
 
    </div> 
 
    <div style="display:inline" ng-show="vm.categorySuccessMessage"> 
 
     <span class="label label-success"> {{ vm.categorySuccessMessage }}</span> 
 
    </div> 
 
    </div> 
 
</form>

的jsfiddle：https://jsfiddle.net/azizn/aem1sLwc/

P.S爲什麼你會需要這個？

Answer 2

.main{ 
 
border:1px solid; 
 
    height: 300px; 
 
    position:relative; 
 
} 
 
.red{ 
 
background:red; 
 
    height: 100px; 
 
    width:100px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    bottom:0px; 
 
} 
 
    
 
.left{ 
 
    
 
    } 
 
.right{ 
 
    right:0px; 
 
    }

<div class="main"> 
 
<div class="red left"></div> 
 
<div class="red right"></div> 
 
</div>

這是............