根据垂直列对齐多行

Question

是否可以进行对齐以使紫色行的大小与左列相同？里面的文字会有不同的长度。目前它们堆叠在顶部，因此底部存在间隙。我可以用边距来定位它们，但我想知道是否有更好的方法？我正在使用Bootstrap

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-3 white">
    <p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
  </div>

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

    <div class="row row-purple">
      <div class="col-md-12">
        <p>lorem lorem ipsumlorem ipsumlorem ipsumlorem ipsumipsum</p>
      </div>
    </div>

    <div class="row row-purple">
      <div class="col-md-12">
        <p>lorem ipsulorelorem ipsumm ipsumlorem ipsumlorem ipsumlorem ipsumm</p>
      </div>
    </div>

    <div class="row row-purple">
      <div class="col-md-12">
        <p>lorem ipslorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumum</p>
      </div>
    </div>

  </div>
</div>

Answer 1

Flexbox可以做到这一点。

只需将display:flex添加到父row。

我在演示中添加了一些填充和边距以分隔元素。

＆＃13;

＆＃13;

body {
  background: #000;
}
.container {
  margin-top: 1em;
}
.container > .row {
  display: flex;
  border: 1px solid white;
  padding: 1em;
}
.white {
  background: #fff;
  margin-right: 1em;
}
.row-purple {
  background: purple;
  color: #fff;
  margin-bottom: 1em;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3 white">
      <p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
    </div>

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

      <div class="row row-purple">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius laudantium quod possimus dolores, accusamus soluta deleniti illo ducimus maxime. Laborum, eum velit. Necessitatibus, tenetur, possimus?</p>
        </div>
      </div>

      <div class="row row-purple">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta consequuntur veritatis a dolor eaque obcaecati, temporibus porro at repudiandae natus tempore aut asperiores, accusantium architecto fuga in odio reiciendis cupiditate libero iure,
            nemo unde! Quia unde, eum nihil dicta iure optio exercitationem, et sed praesentium nam harum reprehenderit, voluptatum accusantium. ipsulorelorem ipsumm ipsumlorem ipsumlorem ipsumlorem ipsumm</p>
        </div>
      </div>

      <div class="row row-purple">
        <div class="col-md-12">
          <p>lorem ipslorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumum</p>
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen Demo