每隔一项需要位于页面的右侧,但与第一项内联,因此它将创建两个回显项目的 2x2 类型网格。
我添加了一些这样的CSS.container{float:left; width:50%;} 但它没有用。
if ($file6 % 2 == 1)
{
echo '<div id="container">
<div id="thumbnail">
<a href="/images/tirgus/'. $file .'" title="'.cleanString($file).'" class="thickbox"><img src="/images/tirgus/thumbs/'.$row['id'].'.jpeg" width="141" height="74" alt="image" /></a>
</div>
<br>
<div id="info1"><sub>' .cleanString($file2).'</sub></div>
<br>
<div id="info2"><sub>Telefons: ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div><br>
<div id="info3"><sub>Iepostoja:</sub> ' .cleanString($file5). '</div><br>
</div><widgets><customization><css> <link rel="stylesheet" href="template_faili/gallery.css"></css></customization></widgets>';
}
else if ($file6 % 2 == 0) {
echo '<div id="container2">
<div id="thumbnail2">
<a href="/images/tirgus/'. $file .'" title="'.cleanString($file).'" class="thickbox"><img src="/images/tirgus/thumbs/'.$row['id'].'.jpeg" width="141" height="74" alt="image" /></a>
</div>
<br>
<div id="info1"><sub>' .cleanString($file2).'</sub></div>
<br>
<div id="info2"><sub>Telefons: ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div><br>
<div id="info3"><sub>Iepostoja:</sub> ' .cleanString($file5). '</div><br>
</div><widgets><customization><css> <link rel="stylesheet" href="template_faili/gallery.css"></css></customization></widgets>';
}
}
.container{float:left; width:50%;}
会想要你想要的。仅供参考,请不要在您的 html 中使用重复的id
。
为了展示如何使用modulo
来实现此目的,您需要执行以下操作:
foreach($files as $file_count => $file) {
if ($file_count % 2 == 0)
{
echo '<div class="thumb row">';
}
echo '
<div class="container">
<div class="thumbnail">
<a href="/images/'. $file .'" title="'.cleanString($file).'" class="thickbox">
<img src="/images/'.$row['id'].'.jpeg" width="141" height="74" alt="image" />
</a>
</div>
<br />
<div id="info"><sub>' .cleanString($file2).'</sub></div>
<br />
<div id="info"><sub>text ' .cleanString($file3). '</sub><br><sub>email: '.cleanString($file4).'</sub></div>
<br />
<div id="info"><sub>text </sub> ' .cleanString($file5). '</div>
<br />
</div>';
if ($file_count % 2 == 1)
{
echo '</div>';
}
}
请注意,上述内容可能无法按原样处理您的脚本,因为我使用的是与值$file
一起循环的组成数组,而您的代码似乎在单独的数组中具有各种值。总体思路是这样的:
foreach($files as $file_count => $file) {
循环访问要输出的每个图像/文件,从 0 开始,以便:
$file_count % 2 == 0
表示两对中的第一对和
$file_count % 2 == 1
表示两对中的第二对。
因此,在输出两个中的第一个之前,您启动一个容器div,例如:
<div class="thumb row">
然后,您可以按原样输出内部 html,对两个缩略图使用相同的 html。
在输出两个中的第二个后,您通过以下方式关闭该div:
</div>
现在,每个缩略图div 都包含在thumb row
容器div 中,允许您应用 css,例如:
.thumb.row .container {
display: inline-block;
}
这将将它们并排排列,但仍会在外部row
div 上断裂。
此外,除了这是一种不明智的方法之外,您还不应该在循环中设置 id
属性,因为这会将相同的id
设置为多个元素,这是无效的 HTML。相反,请更新代码以使用可应用于多个元素的class
。
每个div 都需要使用不同的类/id,其中定义了内联行为。
$col[0] = 'class1';
$col[1] = 'class2';
for ($i=0; $i<$count; $i++) {
$output .= '<div class="'. $col[$i%2] . ' >';
}