如何使用CSS在inline-block元素之间添加换行？

Question

我是一名有用的助手，可以为您翻译以下内容：

我有一个图片列表。我想在第二张图片后使用CSS插入换行符。我已经使用下面列出的CSS技巧，但它不适用于inline-block元素。它只适用于display inline元素。

适用于inline元素的代码。

HTML

<div>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
</div>
<div>
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
</div>

CSS

a:nth-of-type(2):after
{
    white-space: pre;content:'\A';
}
img:nth-of-type(2):after
{
    white-space: pre;content:'\A';
} 

如果我使用的是默认为display:inline-block的img元素。上面的CSS对它不起作用。

请查看下面的示例。

http://jsfiddle.net/murli2308/dD52z/1/

请告诉我是否有任何方法可以实现它。 注意 - 我无法更改HTML结构，因为它是通过数据库传递的。

- murli2308

---

有关这个问题，你有什么进展吗？我正在寻找完全相同的东西，只是我想看到它与<a/>和<li/>一起使用。 - MikeZ

@Mike，我搜索了很多但是没有找到任何解决方案。如果你有的话，请在这里发布答案。 - murli2308

Answer 1

您不能在 <img> 标签上使用 :after 伪元素。这是因为伪元素只能与双标签一起使用。为了实现所需的效果，您可以在每个 <img> 后添加 <br> 标签，并对 <br> 进行样式设置。

<div>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
</div>
<div>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
</div>

在CSS中，您可以像这样设置<br>标签的样式：

a:nth-of-type(2):after
{
    white-space: pre;content:'\A';
}
br{
  display: none;
}
br:nth-of-type(2){
  display:block;
}

- Nishant Kumar

---

你不能在<img>标签中使用:after伪元素。这是因为伪元素只能与双标签一起使用。您是否有此声明的文档或任何参考链接？ - murli2308

我不能再改变HTML结构了。 - murli2308

Answer 2

以下是如何在每个内联块后换行的方法。

div { letter-spacing: 9999px; }

div a, div img { display: inline-block; letter-spacing: initial; }

- CyberAP

---

我想使用CSS在第二张图片后插入一个换行符。您的答案会在每个元素后面插入换行符。 - murli2308

Answer 3

编辑：

img:nth-of-type(2n)
{
  float: left;
}

img:nth-of-type(2n-1)
{
    display: inline;
    clear: left;
  float: left;
}

默认为内联，左浮动且左侧无任何（清除）。但在第一个（甚至）不是第二个。

要将图像居中放置在 div 中，只需添加填充即可。

第二次编辑：

      <div>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
  </div>
<div id="outer" style="background: yellow;  margin:0px auto; width: 110px">
  <div id="fromsql">
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
  </div>
    <div style="clear: both;">
</div>

所以基本上你可以添加一个固定大小的外部 div 并将其居中。div 中的元素从 sql 中保持浮动在缩小的空间中。

- MrPk

---

请检查您是否可以像我所做的那样添加一个外部div。第二次编辑。http://jsfiddle.net/YL6Lp/ - MrPk

非常感谢。但它在滑块中。这意味着外部div的宽度为100％。因此无法给它一个固定的宽度。 - murli2308

嗯，我认为你需要使用JavaScript添加换行符。如果你不能使用float，那么一个在数据库查询后触发的JavaScript可以解决你的问题。 - MrPk

是的，我必须只使用JS来完成它。在CSS中没有可能的方法来做到这一点。 - murli2308

Answer 4

a:nth-of-type(2), img:nth-of-type(2) {
  display: block;
}

- mb21

---

谢谢您的回答。但是它在第二张图片之前和之后添加了换行符...我只想在第二张图片之后添加换行符.. - murli2308

Answer 5

尝试使用div>img>img作为选择器。 添加一些底部边距。

希望这是您要寻找的内容？

另一种方法是将两个图像包装在一个div中。

- vandijkstef

Answer 6

如果你将它变成块状，它就能工作

img:nth-of-type(2)
{
    display:block;    
}

- Nune Dadoyan

---

谢谢你的回答。但是它在第二张图片之前和之后添加了换行符...我只想在第二张图片之后添加换行符。 - murli2308

根据您的评论，我了解到您想要创建一个响应式网站，但是为什么不能使用JS呢？这不会影响使其响应式。还有一个问题，您能否将div宽度固定？ - Nune Dadoyan

如果我有3个断点：桌面、平板和手机。我想在桌面上的每4个元素后插入换行...在标签页中的每3个元素后...在移动设备上的每2个元素后插入换行。因此，使用JS将更加复杂。JS是最后一个选项。我正在尝试使用CSS来找到解决方案。 - murli2308

Answer 7

根据你想要实现的效果，一个替代 - 也许更简单的 - 方法是使用浮动块（而不是内联块）元素来实现相同的效果，这将允许你使用 clear: left 在任何需要的地方产生换行。

- Nick F

---

如果我正在使用浮动元素，则无法使图像位于外部div的中心。 - murli2308