0

Wordpress プラグイン「イージー テーブル」を使用してメニューを作成しましたが、レスポンシブにしたいと考えています。物が左右に浮いていて、携帯で見るとめちゃくちゃ歪んで見えます。この位置付けを修正するのを手伝ってほしいです。

関連する HTML を次に示します。

<div class="leftFloat">
<div id="menuHeader">
<h2>Appetizers</h2>
</div>
[tbl width="400" colwidth="50|50" colalign="left|right"]
Onion Rings-4.95
Fries-3.99
Nachos Supreme (small)-8.95
Nachos Supreme (large)-10.95
[/tbl]


<div id="menuHeader">
<h2>Fresh Salads</h2>
</div>
[tbl width="400" colwidth="100|50|50" colalign="left|right|right"]
-Small-Large
Garden Salad-4.95-5.99
Chef | Caesar| Greek-5.95-6.95
Add chicken for--2.00
[/tbl]
</div>

<div class="rightFloat">
<div id="menuHeader">
<h2>From the Grill</h2>
</div>
[tbl width="400" colwidth="100|50" colalign="left|right"]
Donair Burger-4.95
Hamburger-3.25
Cheeseburger-3.95
Big "J" Burger-5.95
Double Burger-5.95
Club Sandwich & Fries-6.95
BLT Sandwich & Fries-5.95
Lasagna & Garlic Bread-7.25
Chicken or Beef StirFry-8.95
Lebanese Shistawook-7.95
[/tbl]
</div>

<div class="clear"></div>

いくつかの CSS: .leftFloat{ float:left; } .rightFloat{ float:right; }

.clear{ clear:both; }
4

2 に答える 2

0

この CSS を試してください:

.easy-table {
    width: 400px;
}

@media (max-width: 767px) {
    .leftFloat, .rightFloat {
        float : none;
    }

    .easy-table {
        width: 100%;
    }
}

そして、テーブルからインライン スタイルを削除します ( に変更[tbl width="400" colwidth="50|50" colalign="left|right"]します[tbl colwidth="50|50" colalign="left|right"])。

于 2013-09-20T14:46:04.380 に答える