三個桌子並排溢出的div容器？

我有我的頁面的佈局問題。我要創建3個表，並設置它們並排，所以我將它們的浮動屬性是「左」，但DIV容器的高度只與3臺固定，兩個第一表是div的溢出。請幫我解決它。這是我三個桌子並排溢出的div容器？

頁

<body> 

<div id="main"> 

    <table id="tbSA" class="tb"> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
    </table> 

    <table id="tbShops" class="tb"> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
    </table> 

    <table> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
    </table> 

</div> 
</body>

，這裏是風格

body { 
    background-color: #5c87b2; 
} 
#main { 
    margin: 10px 10px 15px 10px; 
    background-color: #fff; 
} 

table, td { 
    border: solid 1px #e8eef4; 
} 

.tb { 
    float:left; 
    margin-right:10px; 
}

來源

2012-03-17 StevenChow

這類問題，是因爲你的前兩個表中浮動。但最後一個不是那麼那麼div會正確地調整它來包裝第三個表。

但它爲了使div也圍繞浮動表。你必須清除漂浮物。

有很多方法來解決這個問題：

最安全的辦法就是關閉父DIV ^[Demo]
```
<div style="clear:both"></div> 
```
老流行的方式是前使用，結算DIV給overflow:hidden這將迫使div環繞所有元素。 這是其他的答案都集中了[Demo]

第三種方式是使用.clearfix類是時下最流行的方式。 [Demo]

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

來源

2012-03-17 11:25:01 Starx

方法有很多種，我寧願使用overflow:hidden;的#main。

http://jsfiddle.net/QBj6R/

#main { 
    margin: 10px 10px 15px 10px; 
    background-color: #fff; 
    overflow:hidden; 
}

來源

2012-03-17 10:59:53 Alex

參見[這]（http://stackoverflow.com/a/1633170/295264）回答爲什麼溢出隱藏並不總是 – Starx 2012-03-17 11:49:47

你的表有它float所以你必須明確他父母是#main。

#main{ 
overflow:hidden; 
}

檢查這個http://jsfiddle.net/VbvLq/1/

來源

2012-03-17 11:01:17 sandeep

參見[這]（HTTP的最佳方法：/ /stackoverflow.com/a/1633170/295264）回答，看看爲什麼溢出隱藏並不總是最好的方法 – Starx 2012-03-17 11:50:00

@Starx它永遠不是一個壞的方法因爲它的工作，直到IE6。但是。clearfix有限制它的工作，直到IE8 – sandeep 2012-03-17 12:12:09

你讓我錯了，我不是說它的壞。 – Starx 2012-03-17 12:13:19

我不知道如果我理解正確的問題，但如果你想一邊把桌子邊，你爲什麼不只是包裝他們在另一個表？例如：

<div id="main"> 
    <table> 
     <tr style="width:33%;"> 
      <td > 
       <table id="tbSA" class="tb"> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
       </table> 
      </td> 
      <td style="width:33%;"> 
       <table id="tbShops" class="tb"> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
       </table> 
      </td style="width:33%;"> 
      <td> 
       <table> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div>

設置在包裹臺上每個TD的寬度到33％，這將設置所有表彼此相鄰

來源

2012-03-17 11:06:58 jacqijvv

三個桌子並排溢出的div容器？

回答

相關問題