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

时间:2013-10-20 14:41:21

标签: html css html-table padding

请看一下: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部分。

我想做的是让我的桌子高度相等。正如您所看到的,右表/单元格的高度小于左表格的高度。

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

1 个答案:

答案 0 :(得分:0)

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