Question

首先，如果以前曾问过这个问题，我道歉。我真的不确定要搜索什么，我甚至无法解释这个问题。我会尽可能清楚。

我想要一张10-20张缩略图的页面。每个图像都在div中以进行填充。图像的大小是未知的，但容器的宽度将是一个设定值，让我们说1000px。我希望图像浮动，以便它们从左到右排列。

我想在第一行图像后插入一个div。该div将跨越容器的宽度。图片将在此div后继续。由于我不确定图像的宽度，我不确定第一行会有多少图像。我希望浏览器呈现适合第一行的项目，然后是广告div，然后继续项目。这甚至可能吗？

再次，抱歉不知道如何提出这个问题，或者是否重复。

谢谢，斯科特

Answer 1

这是可能的，

使用CSS，两个属性（对于所有div）是：

    float:    right;
    position: relative;

有关更多信息，请查看div的w3schools css属性。

Answer 2

没有。这不能用CSS完成。您将需要手动插入所有内容，使用javascript在浏览器中呈现它，或者在发送页面之前使用服务器端语言来执行此操作。

如何做到这一点对SO来说过于宽泛。

Answer 3

首先，对你的元素大小没有任何控制权并不是最好的主意。

我不太了解您的情况，因为您没有提供任何代码，但根据我的理解，以下内容应该有效。

你说容器应该是1000px。如果在图像上设置绝对宽度，则应该能够确定每行将显示多少个元素。

如果您的图像宽度为100px，则每边的填充量为10px，每边的边距为10px。 100 + 20 + 20 =每张图像140px * 7 = 980px。

通过这种方式，您可以在手动在行之间插入div之前显示7个元素。

如果您通过PHP循环数据库中的结果，您可以执行以下操作：

<?php

$i = 0;
while($row = $sth->fetch(PDO::FETCH_ASSOC)) {
  if($i >= 7) {
   echo '<div class="between">bla bla bla</div>';
   $i = 0;
  } else {
   echo '<div class="img-wrap">';
   echo '<img src="'.$row['image'].'" />';
   echo '</div>';
   $i++;
  }
}


?>

http://codepen.io/anon/pen/ZWQzLV

插入一个div

3 个答案: