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

If I had two tables?

如果我有两张桌子?

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

And the CSS looks like:

CSS看起来像:

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

It is not working...

它不起作用......

5 个解决方案

#1

Don't use position:relative, just provide width for each table in order to float properly.

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

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

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

#2

You can simply define float: left to your table class it will come automatically next to each other:

你可以简单地将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>

#3

Try giving them a width as well. 40% each should be a good test.

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

#4

What do you mean it's not working?

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

The CSS that you have will put one table on each side of the parent element. If you're looking for them to be float directly against each other rather than on opposite sides of the parent you'll want 'float: left;' in both of them (or conversely 'float: right;' in both of them).

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

#5

Hey it working i give you live demo now check this

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

and now you can do thing two option as like this

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

Option one

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>

Option two

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

#1