0

I'm trying to make a table which has one row of four cells turn into two rows of two cells on a mobile.

I've tried a number of solutions I've searched for, but none seem to be making it happen.

This is the code I'm working with:

<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>

It's just driving me bananas and I'm getting desperate

4

1 回答 1

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%; }
}
于 2014-03-28T12:48:20.270 回答