插入一个div

首先，我很抱歉，如果这个问题已经被问过。我真的不知道要搜索什么，甚至试图解释这一点，我感到茫然。我会尽我所能清楚。插入一个div

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

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

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

感谢，斯科特

来源

2016-03-06 Scott Dallas

请提供CodePen或的jsfiddle起点，也请参见http：//计算器。 COM /帮助/ MCVE – Roy

这是可能的，

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

float: right; 
    position: relative;

如需进一步信息看W3Schools的对DIV + CSS属性。

来源

2016-03-06 13:32:30

这并不能在所有帮助，再次阅读问题:)，至极更像是，我怎么能得出每一行......各种元素的数量可以varie和未知后面添加一个跨越盒子？ –

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

如何做到这一点对于SO来说太广泛了。

来源

2016-03-06 13:41:16 Rob

首先，它听起来不是最好的想法，不能控制元素的大小。

我不太了解你的情况，因为你没有提供任何代码，但从我的理解，下面应该可以工作。

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

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

这样你就知道在手动插入行之前你只能显示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

来源

2016-03-06 14:02:04 hesonline

插入一个div

回答

相关问题