Question

我有3张桌子，一个接一个地连着。我有一个div，我想放在这些表的右侧。 div的高度可能会根据文本内容而有所不同。目前div显示在表格下方，如下图所示;

current

<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;
}

请参阅更新的fiddle。

在第二次更新的fiddle上，我添加了一个包含clearfix的包装器！

insertusernamehere 评论说您可以使用overflow：hidden而不是clearfix，请参阅here以获得一种新的工作方式，以减少代码执行此操作。

Answer 2

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

现在你已经为div float:left;添加了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>

如何在级联表的右侧放置div - CSS

5 个答案: