css - 如何在级联表的右侧放置一个 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>

但我想把 div 放在桌子旁边，这样它就可以向下延伸。

这是工作小提琴http://jsfiddle.net/ZHVuf/1/

Answer 1

您应该像这样在桌子周围添加一个容器：

html

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

让他float left像你的div一样#myDiv

CSS

#container {
    float:left;
}

请参阅更新的小提琴。

在第二个更新的小提琴中，我添加了一个带有clearfix的包装器！

insertusernamehere评论说您可以使用 overflow:hidden 而不是 clearfix，请参阅此处了解使用更少代码执行此操作的新工作方式。

Answer 2

适用float:left;于所有table并添加clear:both;到第二个和第三个表。

现在你已经有了float:left;for div 只需添加position:relative;top:0;并查看。

或者

创建两个 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

.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

在另一个 div 中移动表格，向左浮动；

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>