Question

我有图像列表。我想在第二张图片之后使用CSS放置换行符。我使用了下面列出的CSS技巧，但它不适用于内联块元素。它仅适用于显示内联元素

适用于内联元素的代码。

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

如果我使用img元素，默认显示为：inine-block。上面的CSS不起作用。

检查以下小提琴，例如

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

如果有任何办法，请告诉我

注意 - 我无法更改HTML结构，因为它来自数据库。

Answer 1

您不能使用：带有<img>标记的伪元素之后。这是因为伪元素仅适用于双标签。为了获得理想的结果，您可以在每个<br>之后提供<img>标记，并改为标注<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;
}

Answer 2

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

Answer 3

编辑：

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

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

默认为内联，左侧浮动，左侧没有（清除）。但是在FIRST（甚至）不是SECOND。

要将图像置于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 fromsql中的元素保持在缩小的空间中浮动

Answer 4

以下是每个内联块后断线的方法。

div { letter-spacing: 9999px; }

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

Answer 5

尝试div＆gt; img＆gt; img作为选择器。添加一些底部保证金。

希望这就是你要找的东西？

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

中

Answer 6

如果您阻止

，它将起作用

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

Answer 7

根据您尝试实现的效果，实现相同效果的替代方法（可能更简单）可能是使用浮动块（而不是内联块）元素，这将允许您使用{ {1}}在需要的地方生成换行符。

如何使用CSS在内联块元素之间添加换行符？

7 个答案: