如何使用CSS創建左右對齊，以便左div不會向右推div

我並沒有做太多css，但我需要使用html設計模板。該模板將用於稍後顯示數據。我需要創建正確的佈局。如何使用CSS創建左右對齊，以便左div不會向右推div

我需要有左分區 - <div id="toAddress"></div> 和右分區 - <div id="fromAddress"></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; 
}

最終模板應該看起來像下面的圖片：

什麼是正確的方法來做到這一點？我究竟做錯了什麼？

來源

2015-11-05 gene

<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

來源

2015-11-05 19:57:28

謝謝。這就是我需要的。另外，有沒有機會，你知道如何設計圖片上的表格嗎？我創建了表格，但無法弄清楚如何從第1列到第8列隱藏邊框 – gene

如何使用CSS創建左右對齊，以便左div不會向右推div

回答

相關問題