-4

我有这张桌子：

<table border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td width="100" height="110"><a href="Frankrijk.html"><img src="Images/Landen/Frankrijk.gif" alt="Frankrijk" width="100" height="67" border="0"></a></td>
          <td width="30">&nbsp;</td>
          <td width="100" height="110"><a href="Spanje.html"><img src="Images/Landen/Spanje.gif" alt="Spanje" width="100" height="67" border="0"></a></td>
          <td width="30">&nbsp;</td>
          <td width="100" height="110"><a href="Zuid_Afrika.html"><img src="Images/Landen/ZuidAfrika.gif" alt="Zuid Afrika" width="100" height="67" border="0"></a></td>
          <td width="30">&nbsp;</td>
          <td width="100" height="110"><a href="Argentinie.html"><img src="Images/Landen/Argentinie.gif" alt="Italië" width="100" height="67" border="0"></a></td>
        </tr>
        <tr>
          <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Frankrijk.html">Frankrijk</a></td>
          <td>&nbsp;</td>
          <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Spanje.html">Spanje</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Zuid_Afrika.html">Zuid-Afrika</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Argentinie.html">Argentinië</a></td>
        </tr>
        <tr>
            <td colspan="7">&nbsp;</td>
        </tr>

        <tr>
          <td height="110"><a href="Chili.html"><img src="Images/Landen/Chili.gif" alt="Chili" width="100" height="67" border="0"></a></td>
          <td>&nbsp;</td>
          <td height="110"><a href="Australie.html"><img src="Images/Landen/Australie.gif" alt="Italië" width="100" height="67" border="0"></a></td>
          <td>&nbsp;</td>
          <td height="110"><a href="Italie.html"><img src="Images/Landen/Italie.gif" alt="Italië" width="100" height="67" border="0"></a></td>
          <td>&nbsp;</td>
          <td height="110">&nbsp;</td>
        </tr>
        <tr>
          <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Chili.html">Chili</a></td>
          <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Australie.html">Australië</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Italie.html">Italië</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center">&nbsp;</td>
        </tr>
    </table>

但我想将其转换为 Div 并将它们彼此相邻放置。在我将它们更改为 Divs 的测试中，我使用了以下 CSS。

.OverviewContainer{Margin:35px auto;text-align:center;display:inline;margin-left:auto;margin-right:auto;}
.OverviewPicture{width:130px;height:120px;margin-left:auto; margin-right:auto;}
.OverviewText{width:130px;font:12px arial;color:#ffffff;line-height:16px;letter-spacing:.1em;}
4

1 回答 1

1

忽略这样一个事实，即我也认为这是一个相当糟糕的问题，很可能只是“让别人做这项工作的隐秘请求”（正如@meagar 所说），这很容易回答。此外，正如@Pekka 已经提到的，最好将表格用于表格数据。

HTML

<div class="OverviewContainer">
    <a class="OverviewPicture" href="Chili.html">
        <img src="Images/Landen/Chili.gif" alt="Chili">
    </a>
    <a class="OverviewText" href="Chili.html">Chili</a>
</div>

<div class="OverviewContainer">
    <a class="OverviewPicture" href="Australie.html">
        <img src="Images/Landen/Australie.gif" alt="Australie">
    </a>
    <a class="OverviewText" href="Australie.html">Australië</a>
</div>

<div class="OverviewContainer">
    <a class="OverviewPicture" href="Italie.html">
        <img src="Images/Landen/Italie.gif" alt="Italië">
    </a>
    <a class="OverviewText" href="Italie.html">Italië</a>
</div>

CSS

.OverviewContainer{
    float: left;
    overflow: hidden;
    margin-right: 5px;
}

.OverviewPicture{
    width: 100px;
}

.OverviewText{
    display: block;
    margin-top: 10px;
}​

​</p>

于 2012-12-21T14:50:58.187 回答