html - 如何使我的 4 篇文章(2 列)具有相同的高度？

Question

请看:http://jsfiddle.net/mdermez32/vTynd/

HTML:

<table class="art-article" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<col width="50%" />
<col width="50%" />
    <tbody>
        <tr>
            <td><table class="metaart"  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png"; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM </span></span><span style="color:rgb(235, 81, 5);"><a href="./services/operating-systems.html"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">IPSUM</span></span></a><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;">; </span></span></span></span></span></span><span style="font-size:20px;"></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/win7-logo.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
            <td> <table class="metaart"   width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/ubbuntu.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                            <p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
        </tr>
        <tr>
          <td>&nbsp; </td>
          <td>&nbsp; </td>
        </tr>
        <tr>
          <td><table class="metaart"  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/brands.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <p style="text-align:right"><strong><a href="./services/laptop.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
          <td><table class="metaart" padding=10px;  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox"  align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="font-size: 20px; color: rgb(61,60,51)">LOREM IPSUM DOLOR </span></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/farmacy.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                                </tr>
                            <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
                            <p style="text-align:right"><strong><a href="./services/medical-software.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                    </table></td>
        </tr>
    </tbody>
</table><br />

                </div>
                <div class="cleared"></div>
                </div>

标题中阴影效果和渐变的css代码在btm的css部分。

我想做的是让我的 table 具有相同的高度。如您所见，右侧表格/单元格的高度小于左侧。

第二个问题.. 我应该在哪里放置填充代码以增加文本与其框之间的空间。

Answer 1

将表放在一个表中或重新组织成一个表，其中表 1 是第一列等。