Question

我的以下代码有一个包含两列的表。表的总宽度为800px。我希望我的两列都有相同数量的宽度。因此我为每个设置400px。但它没有用。我想我需要修改我的代码才能得到它。该怎么做？

<html>
    <head>
    <title>OCAAS</title>
    </head>

    <style>
        html { height: 100%; }

        body {
            background: #f5f0ed;
            font: 10px/1 Tahoma, Geneva, Arial, sans-serif;
            font-weight: bold;
            text-aligh: center;
            BACKGROUND-POSITION: center bottom;
        }

        #image{
            width: 300px;
            height: 300px;
            clear: both;
            margin-right: 500px;
            margin-top: -250px;
            background: #green;
        }
        // amend the image
        #image div{
            width: 500px;
            height: 100px;
            float: left;
            line-height: 100px;
            text-align: center;  

        }

        #image div img{
            display: inline-block;
            vertical-align: top;
            max-width: 80%;
            max-height: 80%;
        }


    </style>

    <BODY>
        <table width="800px" height="100%" cellpadding="1" cellspacing="1" border="1" align="center">
                <tr>
                    <td align="right" valign="middle" width="400px">
                        <div id="image">
                            <div><img src="cat.jpg" border="0"/></div>
                        </div>  
                    </td>
                    <td align="right" valign="middle" width="400px">
                        <div id="wording">
                            <div><p>I AM NEW TO THIS</p></div>
                        </div>
                    </td>
                </tr>
        </table>

        <div id="title">

        </div>
    </body>
</html>

Answer 1

将css用于＆lt; table＆gt; ：
table{width:100%} td{width:50%}

Answer 2

您的图像div宽度是一个问题（它比您指定的列宽更宽）：

#image div{
    width: 500px;

另外，

margin-right: 500px;

修复此值（如果需要，使用％，相对于td宽度，因为所有这些元素都位于表中），以使表td正确对齐。 RGDS，

调整表格列的宽度

2 个答案: