如何回显 html 元素,内联


How to echo html elements, inline

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

这将将它们并排排列,但仍会在外部rowdiv 上断裂。

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

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

$col[0] = 'class1';
$col[1] = 'class2';
for ($i=0; $i<$count; $i++) {
    $output .= '<div class="'. $col[$i%2] . ' >';
}