主页 / 问题 / 981512
Accepted
kompaniietst
Asked:2020-05-15 07:17:24 +0000 UTC2020-05-15 07:17:24 +0000 UTC

如何正确地制作方块？（最好是弯曲的）

  • 772

如何正确地制作方块？ （最好是弯曲的）

如何正确地制作方块？（最好是弯曲的）

css

1 个回答

  1. Best Answer

    在这里您可以通过两种方式进行操作 1 方式，最简单的固定高度 + flex-direction: 列 + 正确的块大小：

    .item1 .item:nth-of-type(1){
  margin:0 0 20px;
}

.item1 .item:nth-of-type(1),
.item1 .item:nth-of-type(2){
  width:200px;
  height:190px;
  background:#ccc;
}

.item1 .item:nth-of-type(3){
  width:500px;
  height:400px;
  background:#ccc;
}

.item1{
  width:730px;
  display:flex;
  flex-direction:column;
  height:400px;
  flex-wrap:wrap;
}
    <div class="item1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    第二种方法是像这样包装元素：

    .item1 {
  display: flex;
  width: 725px;
  margin: auto;
}

.item-1 {
  width: 200px;
  height: 200px;
  background: #ccc;
  margin-bottom: 10px;
}

.item-2 {
  width: 500px;
  height: 410px;
  background: #ccc;
  margin-left: 10px;
}
    <div class="item1">
  <div>
    <div class="item-1"></div>
    <div class="item-1"></div>
  </div>
  <div class="item-2"></div>
</div>

    这两个例子都是全屏的。

    • 2

相关问题