Question

如果我有两张桌子？

<table class="one"> and... <table class="two">

CSS看起来像：

table.one {
    position: relative;
    float: left;
}
table.two {
    position: relative;
    float: right;
}

它不起作用......

Answer 1

不要使用position：relative，只需为每个表提供宽度以便正确浮动。

table.one {
    float:left;
    width:45%;
}

table.two   {
    width:45%;
    float:right;
}

Answer 2

您可以简单地将float: left定义到您的表类，它将自动相邻：

table {
    float:left;
    background:yellow;
    margin-left:10px;
}

<table>
    <tr>
        <td>Table 1</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>

</table>

<table>
    <tr>
        <td>Table 2</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>
</table>

Answer 3

尝试给他们一个宽度。每个40％应该是一个很好的测试。

Answer 4

你的意思是什么不起作用？

您拥有的CSS将在父元素的每一侧放置一个表。如果你正在寻找它们直接相互浮动而不是在父母的两侧，你会想要'浮动：左;'在他们两个（或相反'浮动：正确;'在他们两个）。

Answer 5

嘿它工作我现在给你现场演示检查这个

现在你可以像这样做两件事

选项一

table.one {
  position:relative;
  float:left;
  border:solid 1px green;
}

table.two {
  position:relative;
  float:right;
  border:solid 1px red;
}

<table class="one">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>

选项二

<table class="one" align="left" border="1">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two" align="right" border="1">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>

如何从左到右依次漂浮两张桌子？

5 个答案: