这是我的网页的外观:
-------------
-------------
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移到所需的位置。每个表的上方都有一个标题。
试试下面的代码:
<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
div中添加了一个。和一张float:left
桌子。检查小提琴:https : //jsfiddle.net/amsuh474/2/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句