Wie man ein div auf der rechten Seite von Kaskadierungstabellen platziert - CSS

Question

Ich habe 3 Tabellen, nacheinander kaskadierend. Ich habe ein Div, das ich auf der rechten Seite dieser Tabellen platzieren möchte. Die Höhe von div kann je nach Text im Inneren variieren. Derzeit wird das div wie das Bild unten unter Tabellen angezeigt.

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

Aber ich will neben Tabellen, um die div zu platzieren, so dass sie sich nach unten erstrecken kann. Hier

ist die Arbeits Geige http://jsfiddle.net/ZHVuf/1/

Answer 1

Sie sollten einen Behälter um Sie Tabelle wie folgt hinzu:

Html

<div id="container"> 
<!-- Your table --> 
</div> 

Und ihn float left machen, wie Ihr div #myDiv

Css

#container { 
    float:left; 
} 

siehe aktualisiert fiddle.

Auf dieser zweiten aktualisierten fiddle, fügte ich einen Wrapper mit einem clearfix hinzu!

insertusernamehere kommentierte, dass Sie Überlauf nutzen könnten: versteckt anstelle des clearfix, here für eine neue Arbeits Art und Weise sehen dies mit weniger Code zu tun.

Answer 2

Wenden Sie float:left; auf alle table an und fügen Sie der zweiten und dritten Tabelle clear:both; hinzu.

jetzt haben Sie bereits float:left; für div nur hinzufügen position:relative;top:0; und sehen.

ODER

zwei divs erstellen und Tabellen in einem mit links hinzufügen schwimmend und Sie bereits zweiten div hat.

<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

bewegen Tabellen in einem anderen div, schweben nach links;

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>