Question

我有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个图像分为2个，2个分开。我的问题是，当图像尺寸太大时，我每行有一个图像，而不是2.我想强迫它们在同一行，即使窗口太小......

第一次尝试

.myImg {
    overflow-x:auto;
}

第二次尝试

.myImg {
    overflow:auto;
}

第3次尝试

.myImg {
     overflow:visible;
}

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

这很简单...我猜，它对我有用！谢谢大家

Answer 2

为什么不生成表？

更简单，更快，也更...代码友好。

        <tr>
             <td>
                <img />
             </td>
             <td>
                <img />
             </td>
        </tr>
        <tr>
            <td>
                <img />
            </td>
            <td>
                <img />
            </td>
         </tr>

强制2图像链接在同一行

2 个答案: