如何在級聯表的右側放置div - CSS

Question

我有3個表，一個接一個地級聯。我有一個div，我想放在這些表格的右側。 div的高度可能會因文字內容而異。目前div顯示在表格下方，如下圖所示;

<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell1</td> 
    <td class="cell2">Cell2</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell3</td> 
    <td class="cell2">Cell4</td> 
    </tr> 
</table> 
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell5</td> 
    <td class="cell2">Cell6</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell7</td> 
    <td class="cell2">Cell8</td> 
    </tr> 
</table> 
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell9</td> 
    <td class="cell2">Cell10</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell11</td> 
    <td class="cell2">Cell12</td> 
    </tr> 
</table> 
<div class="mydiv">mydiv</div> 

但我想股利放在旁邊的桌子，以便它可以向下延伸。

這裏是工作提琴http://jsfiddle.net/ZHVuf/1/

Answer 1

您應該添加一個容器周圍，你的表是這樣的：

的Html

<div id="container"> 
<!-- Your table --> 
</div> 

，讓他float left，就像你的div #myDiv

Css

#container { 
    float:left; 
} 

看到更新fiddle。

在這第二次更新fiddle，我添加了一個包裝clearfix！

insertusernameherehere評論說您可以使用overflow：hidden代替clearfix，請參閱here，以獲得更少代碼的新工作方式。

Answer 2

將float:left;應用於所有table並將clear:both;添加到第二和第三表。

現在你已經有float:left;爲div只需加上position:relative;top:0;看看。

OR

創建兩個div和一個左添加表浮動，你已經有了第二個div。

<div class="tableContainerDiv" style="float:left;"> 
    <table><tr><td></td></tr></table> 
    <table><tr><td></td></tr></table> 
    <table><tr><td></td></tr></table> 
</div> 
<div class="yourDiv" style="float:left;"></div> 

Answer 3

HTML

<div class="cl"> 
    <div style="float: left"> 
     your tables 
    </div> 
    <div class="mydiv" style="float: left">mydiv</div> 
</div> 

CSS另一個DIV中

.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;} 
.cl {display: inline-block;} 
/* Hides from IE-mac \\*/ 
* html .cl {height: 1%;} 
.cl {display: block;} 
/* End hide from IE-mac */ 

Answer 4

移動表，浮到左側;

HTML

<div class="table-wrap"> 
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell1</td> 
    <td class="cell2">Cell2</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell3</td> 
    <td class="cell2">Cell4</td> 
    </tr> 
</table> 
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell5</td> 
    <td class="cell2">Cell6</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell7</td> 
    <td class="cell2">Cell8</td> 
    </tr> 
</table> 
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell9</td> 
    <td class="cell2">Cell10</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell11</td> 
    <td class="cell2">Cell12</td> 
    </tr> 
</table> 
</div> 
<div class="mydiv">mydiv</div> 

CSS

.class1{ 
    width: 100px; 
    height: 100px; 
    background: orange; 
} 
.class2{ 
    width: 100px; 
    height: 100px; 
    background: green; 
} 
.class3{ 
    width: 100px; 
    height: 100px; 
    background: gray; 
} 
.mydiv{ 
    width: 200px; 
    background: blue; 
    float: left 
} 
.table-wrap{float:left;} 

Answer 5

<table> 
    <tr><td> 
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell1</td> 
    <td class="cell2">Cell2</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell3</td> 
    <td class="cell2">Cell4</td> 
    </tr> 
</table>enter code here 
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell5</td> 
    <td class="cell2">Cell6</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell7</td> 
    <td class="cell2">Cell8</td> 
    </tr> 
</table> 
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;"> 
    <tr> 
    <td class="cell1">Cell9</td> 
    <td class="cell2">Cell10</td> 
    </tr> 
    <tr> 
    <td class="cell1">Cell11</td> 
    <td class="cell2">Cell12</td> 
    </tr> 
</table> 
     </td> 
     <td> 
<div class="mydiv">mydiv</div> 
     </td> 
    </tr> 
</table>