Question

我使用以下代码：

.contain {
  max-width: 960px;
  text-align: center;
}
.category {
  position: relative;
  display: inline-block;
  float: left;
  padding: 10px;
}

<div align="center" class="category">
  <img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />

</div>
<div align="center" class="category">
  <img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
  <img src="img/user.png" style="width:100; height:100px" />

</div>

<div align="center" class="category">
  <img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />

</div>
<div align="center" class="category">
  <img src="img/abuse.jpg" style="width:100; height:100px;" />

</div>
<div align="center" class="category">
  <img src="img/abuse.jpg" style="width:100; height:100px;" />

</div>

我无法在一行中显示三个图像，在第二行中显示三个图像。但我把图像分成一行。所以有可能像在一个中一样显示图像第1 2 3行和第2行4 5 6图像。

谢谢和问候

Answer 1

将clear: left;添加到.category:nth-child(4)

JSFiddle - DEMO

.category:nth-child(4) {
    clear: left;
}

clear CSS属性指定元素是否可以在旁边在它之前的浮动元素或必须向下移动（清除）在他们之下。 - Mozilla MDN

Answer 2

最简单的方法是为每行设置一个div，每个div只包含其中的3个图像。

<div align="center" class="category">
    <img src="img/Tariffs-Booking-Icon.png" />
    <img src="img/driver_icon.jpg" />
    <img src="img/user.png" />
</div>
<div align="center" class="category">
    <img src="img/abuse.jpg" />
    <img src="img/abuse.jpg" />
    <img src="img/abuse.jpg" />
</div>

请在此处查看：http://jsfiddle.net/vj4kLdjh/1/

稍微好一点的方法是将每一行包装到另一个div中，将显示设置为阻塞（默认）并且内部div应该丢失浮动，或者你需要添加一个clear：both元素到结尾每一行。

<div class="row>
    <div align="center" class="category">
        <img src="img/Tariffs-Booking-Icon.png" />
    </div>
    <div align="center" class="category">
        <img src="img/driver_icon.jpg" />
    </div>
    <div align="center" class="category">
        <img src="img/user.png" />
    </div>
</div>
<div class="row>
    <div align="center" class="category">
        <img src="img/abuse.jpg" />
    </div>
    <div align="center" class="category">
        <img src="img/abuse.jpg" />
    </div>
    <div align="center" class="category">
        <img src="img/abuse.jpg" />
    </div>
</div>

请在此处查看：http://jsfiddle.net/vj4kLdjh/2/

在两种情况下，我都标记了带红色边框的行。我也在我的答案中删除了内联样式，我建议你在代码中也这样做。为这些元素定义类，并尽可能避免内联样式。

Answer 3

这将完全符合您的需要 - 2行包含3张图片，每张960px（您当然可以修改）。不要忘记子元素（类别）是宽度+填充（x2）的实际宽度 - 在这种情况下，每个320px。

CSS:
div.contain {
width:960px;
}

# Each div takes 320px (times 3 is 960px)
div.category {
display: inline-block;
padding:5px;
width: 310px;
}

然后

<div class="contain">
    <div class="category"># image 1</div>
    <div class="category"># image 2</div>
    <div class="category"># image 3</div>
</div>

<div class="contain">
    <div class="category"># image 4</div>
    <div class="category"># image 5</div>
    <div class="category"># image 6</div>
</div>

Answer 4

您必须在每行中添加包装div：

.row_wrap {
  width: 100%;
  display: inline-block;
}
.contain {
  max-width: 960px;
  text-align: center;
}
.category {
  position: relative;
  display: inline-block;
  float: left;
  padding: 10px;
}

<div class="row_wrap">
  <div align="center" class="category">
    <img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
  </div>
  <div align="center" class="category">
    <img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
  </div>
  <div align="center" class="category">
    <img src="img/user.png" style="width:100; height:100px" />
  </div>
</div>
<div class="row_wrap">
  <div align="center" class="category">
    <img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
  </div>
  <div align="center" class="category">
    <img src="img/abuse.jpg" style="width:100; height:100px;" />
  </div>
  <div align="center" class="category">
    <img src="img/abuse.jpg" style="width:100; height:100px;" />
  </div>
</div>

希望这有帮助

Answer 5

＆＃13;

div{
  width: 400px;
}
div>img{
  width: 100px;
  float: left;
}
div>img:nth-child(3n+1){
  clear: left;
}

＆＃13;

<div>
	<img src="1.jpg"/>
	<img src="1.jpg"/>
	<img src="1.jpg"/>
	<img src="1.jpg"/>
	<img src="1.jpg"/>
	<img src="1.jpg"/>
</div>

＆＃13;

如何在两行中显示六个图像

5 个答案: