Question

我有以下问题。我是Joomla的响应式布局网站。在k2文章中，我有一个大表分为两部分。

左侧部分包含文字和一些项目符号（此处响应式布局正常）
右表包含一个包含3行的嵌套表：第1行＆＃39;标题＆＃39;第二行＆＃39;文字内容＆＃39 ;;第3行图片。

嵌套表具有背景自定义图像，当调整自定义BG图像的布局大小变为多个表单并离开内容块时，会产生问题。

[这是正确的嵌套表格]

    <table class="app4" style="float: right;" cellpadding="15">
     <tbody>
      <tr>
        <td class="app44">
          <h4>Title for more details</h4>
        </td>
      </tr>
      <tr>
       <td class="app444" style="text-align: justify;">SomText</td>
      </tr>
       <tr>
       <td class="more"><a class="jcepopup" title="Some;" type="image" href="img.png" target="_blank"><img style="align: center; outline: 0; height: auto; max-width: 100%;" src="img.png" alt="title" width="100%" border="0" /></a>
       </td>
      </tr>
     </tbody>
   </table>

[这是css风格]

@media only screen and (max-width:760px), (min-device-width: 695px) and (max-device-width: 1024px)  { .table{display:block} }

.table {
background: url(BGimg.png); 
background-repeat:no-repeat;
background-size:contain;
background-position:center;
max-width:100%;}
}

它可能是虚拟问题，但是有可能以某种方式对齐嵌套表，不是在不同分辨率下转换自身而在调整大小时会降低吗？

提前谢谢你阿德里安

Answer 1

我想知道这是不是你的想法。检查小提琴链接以获得有效的解决方案

FIDDLE

使用百分比是完成响应的关键

.pull_left{
    float:left;
    width:30%;
}
.pull_left tbody{
    margin-top:25px;
}
.pull_right{
    float:right;
    width:70%;
}

嵌套表响应式布局

1 个答案: