0

データベースに画像を照会し、foreach ループで画像を画面に出力する php スクリプトがあります。すべての画像の幅は同じですが、高さが異なります。これらの画像を2列で表示したい。foreach ループは、html で 2 つの列を明示的に定義して、その列に画像を配置できないことを意味します。現在サイトにあるように、各画像は左に浮いていますが、これにより、高さが異なる画像間にぎこちない垂直方向のスペースが作成されます。

私がこれをうまく説明しているかどうかわからないので、ここに私が今持っているものと私がそれをどのように見せたいかを示すjsfiddleがあります. ここでは、各アイテムが正しく見えるようにコーディングしましたが、ライブのときは、各画像の高さを知らなかったり、変更したりできません。

html に 2 つの列を直接配置する方法がある場合、次のように画像を出力する必要があります。

1 2

3 4

いいえ

1 3

2 4

理想的には、奇妙な php や javascript の回避策を使用する必要はありませんが、代わりに画像ボックスの css を編集するだけで済みます

.img_box {
  float: left;
  width: $img-width;
  max-height: 600px;
  padding: 0px 0px 0px 20px;
  margin-top: 20px;
}
.rate_img {
  width:$img-width;
}

データベースから画像情報を取得した後のphp

foreach ($result as $row) {
    echo '
     <div class="img_box">
        <a href="' . $row['file_loc'] . '"rel="lightbox[main]" title="' . $row['name'] . '" >
            <img src="' . $row['file_loc'] . '" class="rate_img" />
        </a>
     </div>';
4

1 に答える 1

0

html と css だけでは、あなたが望む効果を得ることは不可能だと思います。

利用可能な空白を埋めるには、javascript などを使用する必要があります。たとえば、jQuery Masonry プラグインを見てください(おそらく jQuery を使用しないオプションもあります...)。

于 2013-01-16T00:59:31.213 に答える