Question

我没有对css做太多工作，但我需要使用html设计模板。该模板将用于稍后显示数据。我需要创建正确的布局。

我需要左派 - <div id="toAddress"></div> 和右派 - <div id="fromAddress"></div>。

<div id="toAddress"></div>之后，我有div个id="des"元素。

插入<div id="des">后，会将<div id="fromAddress"></div>推向按钮。如何以正确的方式对齐页面，因此，所有3个div元素是否对齐？

我有以下html文件：

<body>
    <div id = "pageName">
        REQUEST
    </div>
    <div id = "toAddress">
        <table>
            <tr><td>To:</td><td id="toName">Company</td></tr>
            <tr><td>Fax:</td><td id="toFax">Uknown</td></tr>
            <tr><td>Date:</td><td>04 Jun 2001 10:30:21</td></tr>
        </table>
    </div>
    <div id="des">
        Long Text iferkjfklrejfkl;lgkbl'hgknl'knhjlpnhjjhpjtrjgitojgiotrgiotrgotriotr            lmnjhpjmljhpjlopjljpjjop[kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk;khgpoopoyuiyuiyuiyiuyiyiyuiyiu
    </div>
    <div id = "fromAddress">
            <table>
                <tr><td id="from">From:</td>
                    <td>
                        <table>
                            <tr><td>Company</td></tr>
                            <tr><td>Office</td></tr>
                            <tr><td>100 Bond Street</td></tr>
                            <tr><td>London</td></tr>
                            <tr><td>W1</td></tr>
                        </table>
                    </td>
                <tr><td>Fax:</td><td id="fromFax">0207 234567890/</td>            </tr>
                <tr><td>Tel:</td><td id="fromTel">0207 123456789/</td></tr>
            </table>
    </div>
</body>
</html>

我的css文件如下：

#pageName
{
    text-align: center;
    text-decoration: underline;
}

#toAddress
{
    float:left;
    margin-left:20px;
}

#fromAddress
{
    float:right;
    margin-right:100px;
}

#from
{
    vertical-align:top;
    padding-top: 10px;
    padding-right: 5px;
}

#des
{
   width:730px;
   margin-top: 80px;
   margin-left:5px;
}

最终模板应如下图所示：

这样做的正确方法是什么？我究竟做错了什么？

Answer 1

<body>
    <div id = "pageName">
        REQUEST
    </div>
    <div id = "toAddress">
        <table>
            <tr><td>To:</td><td id="toName">Company</td></tr>
            <tr><td>Fax:</td><td id="toFax">Uknown</td></tr>
            <tr><td>Date:</td><td>04 Jun 2001 10:30:21</td></tr>
        </table>
    </div>
    <div id = "fromAddress">
            <table>
                <tr><td id="from">From:</td>
                    <td>
                        <table>
                            <tr><td>Company</td></tr>
                            <tr><td>Office</td></tr>
                            <tr><td>100 Bond Street</td></tr>
                            <tr><td>London</td></tr>
                            <tr><td>W1</td></tr>
                        </table>
                    </td>
                <tr><td>Fax:</td><td id="fromFax">0207 234567890/</td>            </tr>
                <tr><td>Tel:</td><td id="fromTel">0207 123456789/</td></tr>
            </table>
    </div>
    <div id="des">
        Long Text iferkjfklrejfkl;lgkbl'hgknl'knhjlpnhjjhpjtrjgitojgiotrgiotrgotriotr            lmnjhpjmljhpjlopjljpjjop[kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk;khgpoopoyuiyuiyuiyiuyiyiyuiyiu
    </div>
</body>

我在#fromAddress之后立即跟#toAddress进行了跟踪，我希望你的格式正在寻找，这是一个演示：

CODEPEN DEMO

如何使用CSS创建左右对齐，以便左侧div不会推动右侧div

1 个答案: