Question

我不知道我的头衔或副标题会有多长。因此需要从父级继承的height子级。没有指定父亲身高的任何其他方式？或者任何人都可以在这里指出我的答案，我无法找到特定于我的问题的答案。

＆＃13;

.header {
  //height: 45px;
}
.header .col-xs-3 {
  border-right: 3px solid #efefef;
  height: inherit;
  padding-left: 10px;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-12 header">
    <div class="col-xs-3">
      <label>Title 1</label>
    </div>
    <div class="col-xs-3">
      <label>Title 2</label>
    </div>
    <div class="col-xs-3">
      <label>Title 3<br/>Sub-Title</label>
    </div>
    <div class="col-xs-3">
      <label>Title 4</label>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用CSS flexbox。

CSS：

.header {
  display: flex;
  flex-direction: row;
  //height: 45px;
}
.header .col-xs-3 {
  border-right: 3px solid #efefef;
  height: auto;
}

小提琴：https://jsfiddle.net/debraj/fk6fs5ht/

父亲身高自动的孩子的动态高度

1 个答案: