兩個並排的div將移動視圖中的單列x2

Question

我有一個頁面，我想要顯示四個5項目的有序列表。我希望以2x2表格的方式顯示這些內容，但是這些列表中的所有4個列表都將移動到移動視圖中的單個列中。

我目前使用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

或者@media後U可以使塊的寬度= 100％。