文章/答案/技术大牛

发布

社区首页 >问答首页 >当块不能全部放入一行时，CSS -将块换行到单列

问当块不能全部放入一行时，CSS -将块换行到单列
EN

Stack Overflow用户

提问于 2019-12-13 17:49:06

回答 2查看 32关注 0票数 0

假设我在一个容器中有这些块：

$| Luke Skywalker | Princess Leia | Chewbacca |     $

美元符号($)标记容器的宽度。管道标志(|)标记每个区块的宽度。

现在我缩小了容器(可能是因为用户缩小了浏览器窗口)，它不再足够宽，无法容纳同一行上的所有3个块。一个基于flexbox (display: flex; flex-direction: row; flex-wrap: wrap;)的天真实现给了我这样的机会：

$   | Luke Skywalker | Princess Leia |   $
$              | Chewbacca |             $

但这对我来说太难看了。我宁可这样做：

$           | Luke Skywalker |           $
$           | Princess Leia |            $
$             | Chewbacca |              $

有没有办法用纯CSS来达到这个效果呢？

请注意，块是动态生成的。我事先不知道将出现的区块总数或每个区块的内容。

css

回答 2

Stack Overflow用户

发布于 2019-12-13 17:55:56

使用这个

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<style>

.block {
  display: inline-block;
  width: 33%;
}

/* Clearfix (clear floats) */
.block::after {
  content: '';
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .block {
    width: 100%;
  }
}
</style>

票数 0

Stack Overflow用户

发布于 2019-12-13 18:07:40

.flex-box {max-width: 800px;margin: 0 auto;display: flex;box-sizing: border-box;justify-content: space-around;flex-wrap: wrap;}

.flex-box .flex-list {
    background: #000;
    height: 50px;
    width: 150px;
    margin-top: 10px;
}
Use this bro

<div class="flex-box">
  <div class="flex-list"></div>
  <div class="flex-list"></div>
  <div class="flex-list"></div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59319937

复制

相似问题

问当块不能全部放入一行时，CSS -将块换行到单列
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当块不能全部放入一行时，CSS -将块换行到单列EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当块不能全部放入一行时，CSS -将块换行到单列
EN