Question

我知道这对大多数人来说可能很容易，但我仍然坚持这个问题。

我需要实现这个设计： Layout Design

...现在我已经得到了Current layout。一般结构是col-3和col-9的行，这个col-9有两行，一行用于名称和作业标题，另一个用于页面中的统计信息（每个标题为col-3）。我需要它们来填补父母的身高，但身高属性并不起作用。这可能是一个干净的解决方案？非常感谢。

这是结构，它非常简单。

<div class="row profile-header">
 <div class="col-md-3 user-image text-center">
   <img ...>
   <span>..</span>
 </div>
 <div class="col-md-9">
  <div class="row">
    <div class="col-md-12">
      <h2 class="text-white">...</h2>
      <h4 class="text-muted">...</h4>
    </div> 
  </div>
  <div class="row text-center">
    <div class="col-md-3 stat">
      <h3>...</h3>
      <small>...</small>
    </div>
    ...
  </div>
</div>

Answer 1

在父级上使用position: relative，然后在子级上使用position:absolute; bottom: 0;。

Nice explanation there.

Answer 2

Flexbox 将是我的推荐，虽然CSS表也可能是一个选项。

Codepen Demo

Snippet Demo（查看全屏）

.user-image {
  background: pink;
}
.user-image img {
  display: block;
  margin: auto;
}
.profile-header {
  display: flex;
}
.right {
  background: #c0ffee;
  display: flex;
  flex-direction: column;
}
.stats {
  margin-top: auto;
}
.stat {
  background: lightgrey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
  <div class="col-md-3 user-image text-center">
    <img src="http://www.fillmurray.com/300/200" alt="" />
    <span>User Ranking</span>
  </div>
  <div class="col-md-9 right">
    <div class="row">
      <div class="col-md-12">
        <h2 class="text-white">User Name</h2>
        <h4 class="text-muted">reference</h4>
      </div>
    </div>
    <div class="row text-center stats">
      <div class="col-md-3 stat">
        <h3>Some Stat</h3>
        <small>Some Stat</small>
      </div>
      <div class="col-md-3 stat">
        <h3>Some Stat</h3>
        <small>Some Stat</small>
      </div>
      <div class="col-md-3 stat">
        <h3>Some Stat</h3>
        <small>Some Stat</small>
      </div>
      <div class="col-md-3 stat">
        <h3>Some Stat</h3>
        <small>Some Stat</small>
      </div>
    </div>
  </div>

用于填充列的行高 - Bootstrap布局

2 个答案: