0

我已经使用 Wordpress 插件“easy table”制作了一个菜单，现在我想让它具有响应性。我的东西左右浮动，在移动设备上查看时，它看起来非常扭曲。我需要一些帮助来解决这个问题。

以下是一些相关的 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{ 浮动：右；}

.clear{ clear:both; }
4

2 回答 2

0

Try this CSS:

.easy-table {
    width: 400px;
}

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

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

And remove inline styling from the table(change [tbl width="400" colwidth="50|50" colalign="left|right"] to [tbl colwidth="50|50" colalign="left|right"]).

于 2013-09-20T14:46:04.380 回答
0

如果您需要响应式设计，请在您的项目中使用响应式网格系统。如何？

简单的响应式设计：[Bootstrap]

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-4"> ... </div> 
        <div class="col-lg-6 col-md-8"> ... </div>
        <!-- col-lg-6 = on large screen   -> 6/12 (50%)  "big computer" -->
        <!-- col-md-6 = on medium screen  -> 6/12 (50%)  "normal computer" -->
        <!-- col-sm-6 = on small screen   -> 6/12 (50%)  "tablet" -->
        <!-- col-xs-6 = on x-small screen -> 6/12 (50%)  "mobile" -->
        <!-- these are all standard screen pixel -->
    </div>
</div>

更多示例： http: //getbootstrap.com/examples/grid/

于 2013-09-20T15:14:07.780 回答