Question

我使用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; }

Answer 1

试试这个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"]）。

Answer 2

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

http://960.gs/
http://getbootstrap.com/
他们是我最喜欢的还是有更多...

简单的响应式设计：[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/

需要帮助使Easy Table（Wordpress插件）响应

2 个答案: