css - 两个并排的 div，将转到移动 View x2 中的单列

Question

我有一个页面，我想在其中显示四个 5 项有序列表。我想以 2x2 表格的形式显示它，但将所有 4 个列表放在移动 View 中的单个列中。

我目前使用 float:left 来显示它，然后在我的 mobile.css 中使用 float:none 来获得我想要的单列显示。

这是 jsfiddle example .

这看起来还好吗？

(这里是 HTML。请参阅上面的 JSFiddle。)

<div style="width=100%;overflow:hidden;">

<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Fruit</strong> 
<ol>
<li>Apples </li>
<li>Oranges </li> 
<li>Pears </li> 
<li>Lemons </li>
<li>Limes </li>
</ol>
</div>

<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Veggies</strong>
<ol>
<li>Carrots </li>
<li>Peas </li>
<li>Corn </li> 
<li>Peppers </li> 
<li>Cucumber </li> 
</ol>
</div>

</div>

<div style="width=100%;overflow:hidden;">

<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Meats</strong> 
<ol>
<li>Bacon </li>
<li>Chicken </li>
<li>Pork </li> 
<li>Beef </li> 
<li>Turkey </li> 
</ol>
</div>

<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Desserts</strong>
<ol>
<li>Apple Pie </li>
<li>Chocolate Cake </li>
<li>Brownies </li> 
<li>Ice Cream </li> 
<li>Pastries </li> 
</ol>
</div>

</div>

Answer 1

或者U可以在@media之后让width of blocks =100%。