主页 / 问题 / 1087556
Accepted
AlexKnow
Asked:2020-02-26 15:43:26 +0800 CST2020-02-26 15:43:26 +0800 CST

垂直定位 Box 元素（flex？）

  • 772

需要用不寻常的方式排列元素（如图所示），设置块的宽度width:50%，我试图通过它来做flex，但我不明白怎么做，是否可以做它通过CSS？

<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

重要提示：块可以有不同的高度。

应该这样定位：

在此处输入图像描述

html

4 个回答

  1. Best Answer

    无需弯曲

    .wrapper {
  /* you need this: */
  column-count: 2;
}

.box {
  border: 2px solid gray;
  padding: 1em;
  margin-bottom: 10px;
  
  /* and you need this: */
  break-inside: avoid;
}
    <div class="wrapper">
  <div class="box">1<br><br><br></div>
  <div class="box">2<br><br><br><br><br></div>
  <div class="box">3<br><br></div>
  <div class="box">4<br></div>
  <div class="box">5<br><br><br></div>
  <div class="box">6</div>
</div>

    • 4

  2. 将包装器的高度设置为适合 3 个盒子，然后使用 flex-direction: column 和 flex-wrap: wrap 属性。如果没有，那么您需要尝试其他方法。

    • 1

  3. 因为display: block;并且display: inline-block;有这样的规则column-count。
    但它看起来像一个集体农场..

    .wrapper {
  display: block;
  width: 100%;
  column-gap: 10px;
  column-count: 2;
  margin-bottom: -10px;
}

.wrapper .box {
  display: block;
  width: 100%;
  height: 30vh;
  border: 2px solid black;
  box-sizing: border-box;
  margin-bottom: 10px;
}
    <div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

    • 0

  4. 每 2 个块是否必须比第一个块稍大？无论元素数量如何，都可以工作。

    .box {
  border: 1px solid Black;  
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
    <div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

    • 0

相关问题