桌子不能在移动设备中堆叠答案

【问题标题】：Tables not stacking in mobile桌子不能在移动设备中堆叠
【发布时间】：2013-10-15 23:33:44
【问题描述】：

我正在尝试制作一个表格，其中一行四个单元格在移动设备上变成两行两个单元格。

我已经尝试了许多我已经搜索过的解决方案，但似乎没有一个能够实现。

这是我正在使用的代码：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="top"><img style="display:block" float: "left;"  src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-24.jpg" width="150" height="100" /></td><td align="center" valign="top"><img style="display:block" src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-23.jpg" width="150" height="100" /></td>
                  <td align="center" valign="top"  style="font-size: 0; line-height: 0;"><img style="display:block" src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-21.jpg" width="150" height="100" /></td>


                  <td align="center" valign="top"><img style="display:block"  src="http://cdn11.my-wardrobe.com/images/emailers/MOO.COM/moo-luxeproject-kidyeah-19.jpg" width="150" height="100" /></td>
                </tr>
              </table>

这简直把我逼疯了，我越来越绝望了

【问题讨论】：

标签： html responsive-design html-table

【解决方案1】：

在为移动设备堆叠时，您希望使用浮点数和 div 而不是表格。

要实现四个列块的初始行，您将需要两个包装 div，一个向左浮动，一个向右浮动，并且在每个包装 div 内，一个左浮动和一个右浮动。然后整行被包裹在一个容器 div 中，这样您就可以相对于页面的其余部分定位您的行。

堆栈时，使用媒体查询清除不必要的浮动，并重置新堆栈中列的宽度。将左/右环绕的宽度设置为 100% 将有效地将单个全宽行拆分为两个全宽行。

    <div id="wrap">
      <div id="leftwrap">
       <div id="colone">
         ... content of column one goes here ...
       </div>
       <div id="coltwo">
         ... content of column two goes here ...
       </div>
     </leftwrap>
     <div id="rightwrap">
       <div id="colthree">
         ... content of column one goes here ...
       </div>
       <div id="colfour">
         ... content of column two goes here ...
       </div>
     </rightwrap>
     <div id="clear"></div>
   </div>

然后在你的 CSS 中：

    #wrap { width: 100%; }
    #leftwrap { float: left; width: 50%; }
    #rightwrap { float: right; width: 50%; }
    #colone { float: left; width: 50%; }
    #coltwo { float: right; width: 50%; }
    #colthree { float: left; width: 50%; }
    #colfour { float: right; width: 50%; }
    #clear { clear: both; }
@media only screen and (max-width : 900px) {
    #leftwrap { float: none; width: 100%; }
    #rightwrap { float: none; width: 100%; }
    #colone { float: left; width: 50%; }
    #coltwo { float: right; width: 50%; }
    #colthree { float: left; width: 50%; }
    #colfour { float: right; width: 50%; }
}

【讨论】：