Question

我正在尝试将图片并排放在我的电子商务网站上。我的代码如下所示。我没有任何CSS。我如何制作结帐网站（它仅用于测试目的，因此网站不会活着）。

我应该使用javscript还是其他什么？

HTML - ：

  <span class="image">

    <p style="float:left ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
      <a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px;  padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
      <a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
      <a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
    </p>

    <p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">     
      <a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
      <a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
      <a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
    </p>

    <p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
      <a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
      <a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
      <a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
    </p>

  </span>

Answer 1

试用此代码

<span class="image">
  <table align="center">
    <tr>
      <th><a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px; " ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a> </th>
      <th><a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a></th>
    </tr>      

    <tr>          
      <th><a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a></th>
    </tr>

    <tr>
      <th><a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a></th>
      <th><a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a></th>
      <th><a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a></th>
    </tr>
  </table>
</span>

Answer 2

您遇到的问题是由于您的容器（段落标记）宽度与单个图像的宽度相同（所有这三个图像都无法放入其中）指定的容器宽度）。你需要删除它：

width: 180px;

来自您的段落内联样式。

而且你还需要为锚标签指定float：left而不是段落，因此添加

style="float:left"

每个＆lt; a＆gt;标签

Answer 3

您可以在表格中设置它们

<table>
<tr><a href='#.html' style='float:left'><a href='#.html' style='float:right'></tr>
</table>

Answer 4

表的替代方法是将img标记CSS更改为display:inline，然后将text-align:center添加到p，这样：

<span class="image">
    <p style="text-align:center ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
    <a href="order.html"><img src="images/kitmu.jpg" style="display: inline; width: 180px; margin-bottom: 5px;  padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
    <a href="order.html"><img src="images/kitliver.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
    <a href="order.html"><img src="images/kita.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
    </p>
    <p style="text-align:center; clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">     
    <a href="order.html"><img src="images/kitmc.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
    <a href="order.html"><img src="images/kitc.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
    <a href="order.html"><img src="images/Afootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
    </p>
    <p style="text-align:center; clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
    <a href="order.html"><img src="images/cfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
    <a href="order.html"><img src="images/pfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
    <a href="order.html"><img src="images/nfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
    </p>
</span>

HTML - 并排显示图像

4 个答案: