0

每隔一个项目需要在页面的右侧，但与第一个项目内联，因此它将创建两个回显项目的 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>';
  }

}

4

3 回答 3

2 
.container{float:left; width:50%;}

会想要你想要的。仅供参考，请不要id在您的 html 中使用重复的 s。

于 2013-09-15T08:07:16.083 回答
0

为了展示如何使用 amodulo来实现这一点，您需要执行以下操作：

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

这将使它们并排排列，但仍会在外部rowdiv 上中断。

此外，除了这是一种不明智的方法之外，您不应该id在循环内设置属性，因为这会将相同的设置id为多个元素，这是无效的 HTML。相反，更新要使用的代码，class它可以应用于多个元素。

于 2013-09-15T08:28:57.477 回答
0

每个 div 需要使用不同的类/ID，其中定义或未定义内联行为。

$col[0] = 'class1';
$col[1] = 'class2';

for ($i=0; $i<$count; $i++) {

    $output .= '<div class="'. $col[$i%2] . ' >';

}
于 2013-09-15T08:31:57.250 回答