代码之家 › 专栏 › 技术社区 › Melchia

按从上到下的顺序在两列中显示div

flexbox css html

Melchia · 技术社区 · 4 年前

我尝试了以下基于列计数的解决方案,如果div的数量是偶数,那么这个方法很好;如果是奇数,则会中断。

.container {
  column-count:2;
}
.square {
  box-sizing: border-box;
  border: 1px solid black;
  height: 200px;
  padding: 5px;
}

<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>

然后我尝试了一种基于flex的解决方案,但似乎找不到订单的解决方案:

    .container {
      display:flex;
      flex-wrap: wrap;
    }
    .square {
      box-sizing: border-box;
      border: 1px solid black;
      flex: 0 0 50%;
      height: 200px;
    }

<div class="container">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
</div>

我想要实现的是平滑如下:

1 回复 | 直到 4 年前

Temani Afif 4 年前

添加 display:inline-block;width:100%;

.container {
  column-count: 2;
}

.square {
  border: 1px solid black;
  height: 200px;
  display:inline-block;
  width:100%;
}

<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
</div>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前