CSS 垂直显示内联 block 而不是水平显示

Question

我有一个类似于下面使用显示内嵌 block 的列表项

List of Blocks

有没有一种方法可以让元素列表以这种方式显示。

List of Blocks listed downwards

我已经尝试执行我在这个问题 CSS displaying elements vertically down instead of hortizontal straight 中找到的下面的代码然而，我的元素只是在 div 之外的列表中进行，而不是按照我想要的列表样式进行

img {
display: block:}

.container > div {
float: left;}

感谢任何帮助

Answer 1

解决方案 A

一种方法是对元素进行分组，以便拥有不同的列。

.group {
  display:inline-block
}
.floatbox {
  border:1px solid red;
  padding:10px;
  box-sizing:border-box;
  margin:10px;
}

<div class="group">
    <div class ="floatbox">
    <h1>
    Floating Box1
    </h1>
    </div>
 <div class ="floatbox">
    <h1>
    Floating Box2
    </h1>
    </div>
</div>
<div class="group">
    <div class ="floatbox">
    <h1>
    Floating Box3
    </h1>
    </div>
 <div class ="floatbox">
    <h1>
    Floating Box4
    </h1>
    </div>
</div>

方案B

使用 column-count 在这里查看更多 > CSS3 Multiple Columns

.floatbox {
  border:1px solid red;
  box-sizing:border-box;

 
}
.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

<div class="container">
    <div class ="floatbox">
    <h1>
    Floating Box1
    </h1>
    </div>
 <div class ="floatbox">
    <h1>
    Floating Box2
    </h1>
    </div>


    <div class ="floatbox">
    <h1>
    Floating Box3
    </h1>
    </div>
 <div class ="floatbox">
    <h1>
    Floating Box4
    </h1>
    </div>
</div>

方案 C

使用 flexbox 但这有点棘手，因为只有当组合元素的高度大于容器的高度时，它才会产生 2 列(或更多)

在下面的示例中，每个盒子的高度为 100px 而 container 的高度为 200px 所以这就是为什么只有 2 个盒子适合里面一栏。它不像前两个解决方案那样响应

.floatbox {
  border:1px solid red;
  box-sizing:border-box;
  height:100px;

 
}
.container {
  display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch;
   max-height:200px;
}

<div class="container">
    <div class ="floatbox">
    <h1>
    Floating Box1
    </h1>
    </div>
 <div class ="floatbox">
    <h1>
    Floating Box2
    </h1>
    </div>


    <div class ="floatbox">
    <h1>
    Floating Box3
    </h1>
    </div>
 <div class ="floatbox">
    <h1>
    Floating Box4
    </h1>
    </div>
</div>

如果有帮助请告诉我