使用bootstrap或css底部对齐容器项目

Question

有没有办法将父div的所有容器项目底部对齐bootstrap或css。看起来每个子项都位于父项中间：

http://www.bootply.com/Bvp8d2s04w

这是一张图片，请注意带有红色和绿色背景的项目，我希望它们与父容器底部对齐：

Answer 1

您可以将容器设为flexbox（display: flex），然后将所有子项与align-items: flex-end对齐：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

P.S你为什么需要这个？

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是............