0

モバイルで 4 つのセルの 1 行が 2 つのセルの 2 行に変わるテーブルを作成しようとしています。

検索した多くのソリューションを試しましたが、実現しているようには見えません。

これは私が取り組んでいるコードです:

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

それは私をバナナに駆り立てているだけで、私は必死になっています

4

1 に答える 1

1

モバイル用にスタックするときに、テーブルではなく float と div を使用したい。

4 つの列ブロックの最初の行を実現するには、2 つのラッパー div が必要になります。次に、行全体がコンテナー div にラップされるため、行をページの残りの部分に対して相対的に配置できます。

スタックするときは、メディア クエリを使用して不要なフロートをクリアし、新しいスタックの列の幅をリセットします。左右の折り返しの幅を 100% に設定すると、1 つの全幅の行が 2 つの全幅の行に効果的に分割されます。

    <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 に答える