这就是我的网页的外观：
-------------
-------------
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移动到所需位置。每张桌子上面都有一个标题。
答案 0 :(得分：0)
试试这段代码：
<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>中删除了该课程，然后我向该div添加了float:right。和float:left到表。检查小提琴：https://jsfiddle.net/amsuh474/2/
答案 1 :(得分：0)
你需要漂浮你的元素。以下示例。
#undef sprintf
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;
}
答案 2 :(得分：0)
我不能100％确定图像和表格之间的视觉间距应该与下面的两个表格相对应，但我将给出一个使用网格布局页面元素的示例。您可以自行滚动或使用任意数量的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>
答案 3 :(得分：0)
将图像和表包装在元素中（在示例中为<section>），将剩余的2个表包装在另一个块元素（section>）中。然后将所有内容包装在另一个元素（<main>）中。在Snippet演示时，将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>