2017-01-22 48 views
0

我想把內容放在兩個相鄰的div元素中,但是我在第一個div中有影響第二個div內容的垂直位置的表格。爲什麼第一個div中的表格影響第二個div中的內容位置?

這是我的HTML文件

.homepage{ 
 
    display: table; 
 
    width: 100%;} 
 

 
    .userarea { 
 
\t width: 50%; 
 
    display: table-cell;} 
 

 
    #area1{ 
 
\t background-color: pink;} 
 

 
    #area2{ 
 
\t background-color: red; \t } 
 

 
    #rgttop{ 
 
\t background-color: blue;}
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
\t <title>Welcome</title> 
 
\t <link rel="stylesheet" type="text/css" href="beauty.css"> 
 
    </head> 
 
    <body > 
 
    <div class="homepage"> 
 

 
    <div class="userarea" id="area1"> 
 

 
\t <table width="100%"> 
 
\t <tbody> 
 
\t <tr> 
 
\t <td width="50%"> 
 
\t <div > 
 
\t \t <p>Person 1: ABCD</p> 
 
\t \t <p>Person 2: QWRT</p> 
 
\t \t <p>Person 3: TYUI</p> 
 
\t \t <p>Person 4: FGHJ</p> 
 
\t \t <p>Person 5: BNMV</p> 
 

 
\t </div> 
 
\t </td> 
 
\t <td width="50%"> 
 
\t <div > 
 
\t \t <p>Person 1: ABCD</p> 
 
\t \t <p>Person 2: QWRT</p> 
 
\t \t <p>Person 3: TYUI</p> 
 
\t \t <p>Person 4: FGHJ</p> 
 
\t \t <p>Person 5: BNMV</p> 
 

 
\t </div> 
 

 
\t </td> 
 

 
\t </tr> 
 
\t </tbody> 
 
\t </table> 
 
    </div> 
 

 
    <div class="userarea" id="area2"> 
 
\t <div id="rgttop"> 
 
\t \t Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
 
\t </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
    </html>

第一個div是ID =區域1和第二DIV ID =面積2

問題是與ID = rgttop格。

有人可以解釋爲什麼它會轉移,以及如何正確定位它?

感謝

回答

0

你只需要浮動.userarea

.homepage{ 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.userarea { 
 
\t width: 50%; 
 
    float: left; 
 
    display: table-cell; 
 
} 
 

 
#area1{ 
 
\t background-color: pink; 
 
} 
 

 
#area2{ 
 
\t background-color: red; 
 
} 
 

 
#rgttop{ 
 
\t background-color: blue; 
 
}
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
\t <title>Welcome</title> 
 
\t <link rel="stylesheet" type="text/css" href="beauty.css"> 
 
    </head> 
 
    <body > 
 
    <div class="homepage"> 
 

 
    <div class="userarea" id="area1"> 
 

 
\t <table width="100%"> 
 
\t <tbody> 
 
\t <tr> 
 
\t <td width="50%"> 
 
\t <div > 
 
\t \t <p>Person 1: ABCD</p> 
 
\t \t <p>Person 2: QWRT</p> 
 
\t \t <p>Person 3: TYUI</p> 
 
\t \t <p>Person 4: FGHJ</p> 
 
\t \t <p>Person 5: BNMV</p> 
 

 
\t </div> 
 
\t </td> 
 
\t <td width="50%"> 
 
\t <div> 
 
\t  <p>Person 1: ABCD</p> 
 
\t \t <p>Person 2: QWRT</p> 
 
\t \t <p>Person 3: TYUI</p> 
 
\t \t <p>Person 4: FGHJ</p> 
 
\t \t <p>Person 5: BNMV</p> 
 
\t </div> 
 

 
\t </td> 
 

 
\t </tr> 
 
\t </tbody> 
 
\t </table> 
 
    </div> 
 

 
    <div class="userarea" id="area2"> 
 
\t <div id="rgttop"> 
 
\t \t Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
 
\t </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
    </html>

+0

混合浮動wirh表? – dippas

+1

在適當情況下使用表格沒有任何問題。浮動div也沒有什麼問題。這裏沒有什麼混雜。 –

0

如何添加垂直對齊:首位; to#area2 style?

相關問題