-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 に変換し、それらをすべて隣り合わせに配置したいと考えています。それらを Div に変更するテストでは、次の 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 に答える