将表格移到图片旁边

这是我的网页的外观:

-------------
-------------   
 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:rightdiv中添加了一个和一张float:left桌子。检查小提琴:https : //jsfiddle.net/amsuh474/2/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章