下一個移動表到圖像

Question

這是我的網頁的外觀：

------------- 
------------- 
Image here  
------------- 
------------- 
Table1 here 
Table2 here 
Table3 here 

我希望，使它看起來像這樣：

------------- 
------------- 
Image here  Table1 here 
------------- 
------------- 
Table2 here  Table3 here 

HTML：

<img class="image" src="somesrc"> 
    <table id="table-1"> 
     <tbody> 
     <tr class="row-1"> 
      <td class="column-1">something</td><td class="column-2">something</td> 
     </tr> 
     <tr class="row-2"> 
      <td class="column-1">something</td><td class="column-2">something</td> 
     </tr> 
The same for the other 2 tables but with different ID 

CSS：

.image { 
height: auto; 
width: 250px; 
} 

#table-1, #table-2, #table-3 { 
    width: 40%; 
    font-weight: bold; 
} 

#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 { 
    background-color: #000000; 
    color: #fff; 
    width: 40%; 
} 

我不知道如何將table1移動到所需的位置。每張桌子上面都有一個標題。

Answer 1

試試這個代碼：

<div class="image"> 
    <img src="somesrc"> 
    </div> 
    <table id="table-1"> 
     <tbody> 
     <tr class="row-1"> 
      <td class="column-1">something</td><td class="column-2">something</td> 
     </tr> 
     <tr class="row-2"> 
      <td class="column-1">something</td><td class="column-2">something</td> 
     </tr> 

CSS：

.image { 
height: auto; 
width: 250px; 
float:right; 
} 

#table-1, #table-2, #table-3 { 
    width: 40%; 
    font-weight: bold; 

} 

#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 { 
    background-color: #000000; 
    color: #fff; 
    width: 40%; 
    float:left; 
} 

我添加了一流的形象一個div和<img>刪除類的話，我只是增加了一個float:right到該分區。和float:left。檢查小提琴：https://jsfiddle.net/amsuh474/2/

Answer 2

您需要浮動您的元素。下面的示例。

table { 
 
    width: 40%; 
 
    margin: 10px; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
} 
 
.image { 
 
    height: 100px; 
 
    border: 1px solid; 
 
    margin: 10px; 
 
    width: 40%; 
 
} 
 
.pull-left { 
 
    float: left; 
 
} 
 
.clearfix { 
 
    clear: both; 
 
}

<div class="image pull-left">IMAGE</div> 
 
<table class="pull-left"> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    </tr> 
 
</table> 
 
<div class="clearfix"></div> 
 
<table class="pull-left"> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    </tr> 
 
</table> 
 
<table class="pull-left"> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Column 1</td> 
 
    <td>Column 2</td> 
 
    </tr> 
 
</table>

Answer 3

我不是100％肯定的圖像和表格之間的視覺間距應該怎麼VS下面兩個表，但我會用網格來舉個例子吧佈局頁面元素。你可以滾你自己或任何數量的CSS框架，像Bootstrap，Skeleton，Foundation等使用網格

* { 
 
    box-sizing: border-box; 
 
} 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    border: 1px solid #ccc; 
 
} 
 
.row { 
 
    margin-left: -10px; 
 
    margin-right: -10px; 
 
    overflow: hidden; /* cheap clearfix - should use: http://nicolasgallagher.com/micro-clearfix-hack/ */ 
 
} 
 
[class^="col-"] { 
 
    float: left; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 
.col-half { 
 
    width: 50%; 
 
}

<div class="row"> 
 

 
    <div class="col-half"> 
 
    <img src="http://placehold.it/250x175/ffcc00/?text=example"> 
 
    </div> 
 

 
    <div class="col-half"> 
 

 
    <h2>Table 1</h2> 
 

 
    <table> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </table> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="row"> 
 

 
    <div class="col-half"> 
 

 
    <h2>Table 2</h2> 
 

 
    <table> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </table> 
 

 
    </div> 
 

 
    <div class="col-half"> 
 

 
    <h2>Table 3</h2> 
 

 
    <table> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </table> 
 

 
    </div> 
 

 
</div>

Answer 4

裹的圖像和表格中的元素（在本例中是<section>）以及另一個塊元素（section>）中的剩餘2個表。然後將所有內容都包含在另一個元素中（<main>）。將代碼display: table-* CSS properties應用於代碼片段。

#main { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
section { 
 
    display: table-row; 
 
} 
 
figure, 
 
table { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: table-cell; 
 
    border: 2px dashed red; 
 
} 
 
td { 
 
    width: 25%; 
 
    border: 1px solid black; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    margin-bottom: calc(50% - 25vh); 
 
} 
 
figcaption { 
 
    text-align: center; 
 
    margin: 0 0 5px 0; 
 
    border: 1px solid blue; 
 
}

<main id='main'> 
 
    <section> 
 
    <figure> 
 
     <figcaption>IMAGE</figcaption> 
 
     <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'> 
 
    </figure> 
 
    <table> 
 
     <caption>TABLE1</caption> 
 
     <tbody> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>Tables will stretch with their content accordingly.</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
     </tr> 
 
     <tr> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </section> 
 
    <section> 
 
    <table> 
 
     <caption>TABLE2</caption> 
 
     <tbody> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>The maximum width of each table is 50% of viewport</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
     </tr> 
 
     <tr> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <table> 
 
     <caption>TABLE3</caption> 
 
     <tbody> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
     </tr> 
 
     <tr> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>TD</td> 
 
      <td>This content is added just to fill out the rest of the dead space.</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </section> 
 
</main>