css - カスケード テーブルの右側に div を配置する方法 - CSS

Question

私は3つのテーブルを持っており、次々にカスケードしています。これらのテーブルの右側に配置したい div があります。div の高さは、内部のテキストによって異なる場合があります。現在、下の画像のように、div はテーブルの下に表示されます。

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

しかし、下に拡張できるように、テーブルの隣に div を配置したいと考えています。

ここに作業フィドルがありますhttp://jsfiddle.net/ZHVuf/1/

Answer 1

次のようにテーブルの周りにコンテナを追加する必要があります：

HTML

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

そしてfloat left、あなたのdivのように彼を作ります#myDiv

Css

#container {
    float:left;
}

更新されたフィドルを参照してください。

この2番目に更新されたフィドルで、クリアフィックス付きのラッパーを追加しました。

insertusernamehereは、clearfixの代わりにoverflow：hiddenを使用できるとコメントしました。より少ないコードでこれを行うための新しい作業方法については、ここを参照してください。

Answer 2

float:left;すべてに適用し、 2番目と3番目のテーブルにtable追加します。clear:both;

今、あなたはすでにfloat:left;divのために追加position:relative;top:0;して見るだけです。

また

2つのdivを作成し、左にフローティングのテーブルを1つに追加すると、すでに2番目のdivがあります。

<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

テーブルを別のdiv内に移動し、左にフロートします。

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>