Question

<div class="parent">
    <div id="item1">Item1</div>
    <div id="item2">Item2</div>
    <div id="item3">Item3</div>
</div>

如何排列项目，我希望项目2和3显示为块，以便项目1与由项目2和项目3组成的块元素内联。项目1的高度与项目2的高度相同和第3项为一体。

Answer 1

简单flexbox方法：

#item1 { height: 200px; }
#item2, #item3 { height: 100px }
#item1 { background: yellow; }
#item2 { background: green; }
#item3 { background: blue; }

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}

<div class="parent">
  <div id="item1">Item1</div>
  <div id="item2">Item2</div>
  <div id="item3">Item3</div>
</div>

简单float而不是flexbox适用：

#item1 { background: yellow; }
#item2 { background: blue; }
#item3 { background: green; }

#item1 { 
  height: 200px;
  float: left;
  width: 50%;
}

#item2, #item3 {
  height: 100px;
  float: right;
  width: 50%;
}

<div class="parent">
  <div id="item1">Item1</div>
  <div id="item2">Item2</div>
  <div id="item3">Item3</div>
</div>

如何在flexbox中安排项目？

1 个答案: