html - 如何从左到右浮动两个相邻的桌子？

Question

如果我有两张桌子？

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

CSS看起来像：

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

它不工作...

Answer 1

不要使用位置：相对，只需为每个表格提供宽度以便正确浮动。

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

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

现在你可以像这样做两个选项

选项一

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>

Answer 5

你是什​​么意思它不起作用？

您拥有的 CSS 将在父元素的每一侧放置一个表格。如果您正在寻找它们直接相互浮动而不是在父级的相对两侧，您将需要'float：left;' 在他们两个中（或者相反地'浮动：对;'在他们两个中）。