HTML左对齐并且右对齐无效

时间:2015-05-28 10:06:35

标签: html css

我想将图像放在左边,另一个放在右边,但它不起作用。左侧的图像位于顶部,右侧的图像位于底部。

这是我的代码

<tr>
<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 0px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif;">
    <table  class="headline_1" width="333" align="left">
        <tr>
            <!--HOSTED IMAGE-->
            <td bgcolor="#fff" style="background-image: url('http://ml.nextoptionregistration.com/responsive/nextoption-mailer-01/01_02.png'); background-repeat:no-repeat;" background="http://ml.nextoptionregistration.com/responsive/nextoption-mailer-01/01_02.png" width="333px" height="204" valign="top">
            <!--[if gte mso 9]>
            <v:rect style="width:333px;" strokecolor="none">
            <v:fill type="tile" color="#fff" src="http://ml.nextoptionregistration.com/responsive/nextoption-mailer-01/01_02.png" /></v:fill>
            </v:rect>
            <v:shape id="text1" style="position:absolute;width:333px;">
            <![endif]-->
                <p style="font-size:21px;font-family:arial, Helvetian;font-weight:bold;color:#e98106;padding:120px 0px 0px 90px; margin:0px 0px 0px 0px;">
                <a href="https://www.nextoption.com/registration" name="read_more" xtlinkname="read_more" xt="SPCLICK" target="_blank" style="color:#e98106;text-decoration:underline;">
                    Click Here To Start >>
                </a>
                </p>
            <!--[if gte mso 9]>
            </v:shape>
            <![endif]-->
            </td>
    </tr>
    </table>
    <table  class="headline_2" width="365" align="right">
        <tr>
            <td>
                <img alt="" src="01_03.png"/>
            </td>
        </tr>
    </table>
</td>

3 个答案:

答案 0 :(得分:0)

你应该试试float:left和float:right。 并尝试使用css属性增加代码丰富度 在html5中,对齐可能根本不起作用。

答案 1 :(得分:0)

align属性会影响表的内容,而不会影响表本身。

另外考虑不使用表格,表格不应该用于布局。使用div和css在第一个项目上添加float。

如果您想保留表格,那么您想要彼此相邻的项目应位于同一行的单独单元格中。

答案 2 :(得分:0)

&#13;
&#13;
<tr>
<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 0px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif;">
  
    <table  class="headline_2" width="100%" align="right">
        <tr>
            <td>
                 <img alt="" src="http://ml.nextoptionregistration.com/responsive/nextoption-mailer-01/01_02.png" width="100%"/>                
            </td>
            <td>
                <img alt="" src="http://ml.nextoptionregistration.com/responsive/nextoption-mailer-01/01_02.png" width="100%"/>
            </td>
        </tr>
    </table>
</td>
&#13;
&#13;
&#13;

可能会帮助你。