Wie kann ich zwei Tische nebeneinander von links nach rechts schweben lassen?

Question

Wenn ich zwei Tische hätte?

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

Und die CSS wie folgt aussieht:

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

Es funktioniert nicht ...

Answer 1

Verwenden Sie nicht position: relativ, geben Sie nur die Breite für jede Tabelle an, um korrekt zu schwimmen.

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

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

Answer 2

Probieren Sie eine Breite als auch zu geben. 40% sollten jeweils ein guter Test sein.

Answer 3

Was meinst du, es funktioniert nicht?

Das CSS, das Sie haben, wird eine Tabelle auf jeder Seite des Elternelements platzieren. Wenn Sie nach ihnen suchen, um direkt gegeneinander zu schweben anstatt auf gegenüberliegenden Seiten des Elternteils, wollen Sie 'float: left;' in beiden (oder umgekehrt: float: right; in beiden).

Answer 4

Hey es Arbeit gebe ich Ihnen Live-Demo jetzt lesen Sie in diesem

und jetzt können Sie, was zwei Option tun, wie wie diese

Option ein

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 zwei

<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

Sie einfach float: left auf Ihre Tabellenklasse definieren kann, wird es kommen automatisch nebeneinander:

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>