Question

每个第二项需要位于页面的右侧，但是与第一项内联，因此它将为两个回显项创建2x2类型的网格。

我添加了一些像这样的CSS .container {浮动：左;宽度：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>';
  }

}

Answer 1

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

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

Answer 2

为了展示如何使用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。

Answer 3

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

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

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

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

}

如何回显html元素，内联

3 个答案: