0

4 つの画像へのリンクがあり、画像を 2x2 形式で表示する必要があります... 私はこれを行いました:

echo '<a id="myImgId" class="myImg"  href="javascript: submitform()">';
    while  (($num_images > 0) && ($num_images <= $max_images))
    {
        if($num_images == ($max_images/2)) { echo '<br />';}
        echo '<img class="nomarge" alt="" id="updateimage' . $num_images . '" name="adBanner' . $num_images . '" src="rsz_image' . $num_images . '.jpg" />';
        $num_images--;
    }
echo '</a>';

わかりました、br は 2 つの画像を上と下に分けます。私の問題は、画像のサイズが大きすぎると、1 行に 2 枚ではなく 1 枚の画像しか表示されないことです。

1回目

.myImg {
    overflow-x:auto;
}

2回目の試行

.myImg {
    overflow:auto;
}

3回目の試行

.myImg {
     overflow:visible;
}
4

2 に答える 2

1 
echo '<a id="myImgId" class="myImgId" href="javascript: submitform()">';
echo '<ul>';
    while  (($num_images > 0) && ($num_images <= $max_images))
    {                                                                     
        if($num_images == ($max_images/2)) { echo '</ul><ul style="padding:0 0 0 0;border:0 0 0 0;margin:0 0 0 0;">';}
        echo '<li><img class="nomarge" alt="" id="updateimage' . $num_images . '" name="adBanner' . $num_images . '" src="rsz_image' . $num_images . '.jpg" width="' . $ver  . '" height="' . $hor . '"/><li>';
        $num_images--; 
    }
echo '</ul>';
echo '</a>';

CSS

ul {
    padding: 0;
    margin: 0;
    border:  0;
    display: table;
    table-layout: fixed;
    display: inline;   
}

li {
    padding: 0;
    border: 0;
    margin: 0;  
    display: table-cell;      

}
img {
  max-width: 100%;
  border: 0;
  width: auto\9;
  height: auto;
  display: block;
}

それは簡単です...私はそれがうまくいったと思います！皆さん、ありがとうございました

于 2013-06-05T14:17:26.660 に答える
0

なぜテーブルを生成しないのですか?

よりシンプルかつ高速で、さらに...コードフレンドリー。

        <tr>
             <td>
                <img />
             </td>
             <td>
                <img />
             </td>
        </tr>
        <tr>
            <td>
                <img />
            </td>
            <td>
                <img />
            </td>
         </tr>
于 2013-06-03T14:28:32.127 に答える