使用CSS的HTML表對齊

Question

我想讓我的對齊表和HTML頁面上的地圖。 它看起來像這樣的時刻：

1,2,3都是表，使用CSS：

table {float:left; 
    border-collapse: collapse; 
    width: 20%; margin: 10px 
} 

和4是使用的GoogleMap：

#location{width: 30%; 
    float: left; 
    margin: 10px; 
    margin-top: 30px; 
} 

我會像3下2，4總是在右邊：

Answer 1

最簡單的方法是將兩個表格換成一個div，然後浮動該div。

.float-left { 
 
    float: left; 
 
    width: 20%; 
 
    margin: 10px; 
 
    border: 4px solid black; 
 
} 
 

 
.full-width { 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 

 
.full-width caption { 
 
    margin: 12px 0 2px 0; 
 
    font-weight: bold; 
 
} 
 

 
.google-map { 
 
    border: 2px solid black; 
 
    width: 30%; 
 
    margin: 10px; 
 
    float: left; 
 
    height: 300px; 
 
    text-align: center; 
 
}

<div class="float-left"> 
 
    <table class="full-width"> 
 
    <caption>Table 1</caption> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div class="float-left"> 
 
    <table class="full-width"> 
 
    <caption>Table 2</caption> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    </table> 
 
    <table class="full-width"> 
 
    <caption>Table 3</caption> 
 
    <tr> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Data 1</td> 
 
     <td>Data 2</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div class="google-map"> 
 
    Google Map Here 
 
</div>

Answer 2

您可以簡單地將2和3放在一個父容器中，並使其成爲float: left。如果你的元素的寬度足夠窄以允許它們被放置在你的問題所示的三列中，這應該就足夠了。