时间戳

首页 > 解决方案 > 使用列宽和内联块的最少两行

html - 使用列宽和内联块的最少两行

问题描述

我正在尝试将内联块分成列，从每列中的一个项目开始。相反，它最初在一列中给了我两个块。我能做些什么来改变这种行为？

http://jsfiddle.net/fuqrwe64/10/

<style>
.container {
  background: #f99;
  column-width: 130px;
}

.item {
  background: #9f9;
  width: 130px;
  height: 40px;
  margin: 5px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-family: monospace;
}
</style>

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">F</div>
</div>

标签： htmlcsscss-multicolumn-layout

解决方案

尝试这个，

  .container {
  background: #f99;
  width:280px;
  display: flex;
  text-align: center;
  align-items: center;
  flex-wrap:wrap;
}

.item {
  background: #9f9;
  width: 130px;
  height: 220px;
  margin: 5px;
  justify-content: center;
  font-size: 2em;
}

我希望这是你想要的。如果不只是让我知道确切的要求。

推荐阅读