Question

我有我担心的一个非常基本的问题......我正在使用Flexbox / Bootstrap创建一个布局，但我遇到了div高度问题。我的第一个块没有那么多的内容，我的第二个块有很多，第三块不是很多。是否可以防止第一个块伸展以匹配第二个块的高度？

我想把第三块塞进第一块...

Here is a demo.

HTML

<div id="contentWrapper">
<div id="blockOne" class="block col-sm-6">
    <h1>Block One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum porttitor erat, vel porttitor turpis ullamcorper non. Proin a velit vitae elit feugiat imperdiet.</p>
</div>
<div id="blockThree" class="block col-sm-5">
    <h1>Block Three</h1>
    <p>Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum felis vulputate nec. Nunc sit amet congue enim. Suspendisse potenti.</p>
</div>
<div id="blockTwo" class="block col-sm-6">
    <h1>Block Two</h1>
    <p>Ut turpis enim, pharetra a semper in, hendrerit non dui. Praesent eget finibus magna. Proin eget aliquet tellus. Aliquam metus orci, volutpat eget nisi sed, fringilla eleifend diam. Vivamus sed gravida risus, nec posuere ipsum. Nulla facilisi. Morbi eleifend euismod vehicula. Proin finibus, velit in aliquam tincidunt, odio purus lacinia odio, at rutrum sem quam sit amet orci. Duis diam sem, pretium nec hendrerit quis, ultrices ac orci. Suspendisse accumsan iaculis ipsum, non auctor dolor laoreet vel. Suspendisse potenti. Ut porta nisi at sem posuere, id condimentum massa ultricies. Integer a odio molestie libero mattis aliquam in at risus. Aenean eget nisl ex. Sed id sem turpis.
        <br><br>
        Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum felis vulputate nec. Nunc sit amet congue enim. Suspendisse potenti.
    </p>
</div>

SCSS

#contentWrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
.block {
    padding: 1em;
}
#blockOne {
    background-color: #3498db;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}
#blockTwo {
    background-color: #e74c3c;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

#blockThree {
    background-color: #58d68d;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}
}

Answer 1

你可以使用CSS Grid吗？

codepen

＆＃13;

#contentWrapper {
  color: #404040;
  font-family: sans-serif;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.block {
  padding: 1em;
}

#blockOne {
  background-color: #3498db;
}

#blockTwo {
  background-color: #e74c3c;
  grid-row: span 2;
}

#blockThree {
  background-color: #58d68d;
  order: 2;
}

＆＃13;

<div id="contentWrapper">
  <div id="blockOne" class="block">
    <h1>Block One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum porttitor erat, vel porttitor turpis ullamcorper non. Proin a velit vitae elit feugiat imperdiet.</p>
  </div>
  <div id="blockThree" class="block">
    <h1>Block Three</h1>
    <p>Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum felis vulputate
      nec. Nunc sit amet congue enim. Suspendisse potenti.</p>
  </div>
  <div id="blockTwo" class="block">
    <h1>Block Two</h1>
    <p>Ut turpis enim, pharetra a semper in, hendrerit non dui. Praesent eget finibus magna. Proin eget aliquet tellus. Aliquam metus orci, volutpat eget nisi sed, fringilla eleifend diam. Vivamus sed gravida risus, nec posuere ipsum. Nulla facilisi. Morbi
      eleifend euismod vehicula. Proin finibus, velit in aliquam tincidunt, odio purus lacinia odio, at rutrum sem quam sit amet orci. Duis diam sem, pretium nec hendrerit quis, ultrices ac orci. Suspendisse accumsan iaculis ipsum, non auctor dolor laoreet
      vel. Suspendisse potenti. Ut porta nisi at sem posuere, id condimentum massa ultricies. Integer a odio molestie libero mattis aliquam in at risus. Aenean eget nisl ex. Sed id sem turpis.
      <br><br> Sed pellentesque neque non metus placerat auctor. Donec porttitor nulla ac ante ullamcorper maximus. Cras vulputate auctor tellus vitae interdum. Fusce ac nunc pretium, tristique nisl in, dignissim est. Nam porta ante nulla, nec vestibulum
      felis vulputate nec. Nunc sit amet congue enim. Suspendisse potenti.
    </p>
  </div>
</div>

＆＃13;

Flexbox项目 - 限制元素高度

1 个答案: