Question

我使用display in-lineblock

有一个类似下面的列表项

有没有办法让我可以用这种方式显示项目列表。

我尝试过在下面的代码CSS displaying elements vertically down instead of hortizontal straight中找到的代码但是我的项目只是在div之外的列表中进行而不是以我想要的列表样式进行

img {
display: block:}

.container > div {
float: left;}

感谢任何帮助

Answer 1

解决方案A

一种方法是将元素分组，以便使用不同的色块。

＆＃13;

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

＆＃13;

<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>

＆＃13;

解决方案B

使用column-count在此处查看更多＆gt; CSS3 Multiple Columns

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

解决方案C

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

在下面的示例中，每个框的高度为100px，而container的高度为200px，这就是为什么只有2个框适合一列内部的原因。它没有前两个解决方案那么敏感

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

让我知道是否有帮助

CSS垂直显示内嵌块而不是水平显示

1 个答案: