div和span代替表格

Question

我曾經有一張桌子。一行或多行的集合構建一個組（類別）並獲得特殊的背景顏色。該行的每個單元格都是要顯示的產品。每個產品都應該有一個標題（產品名稱）和一個訂購數量的頁腳。

現在我需要把它用於移動設備。

產品圖片是100x100在一個盒子裏（修正尺寸）。

如果移動設備的屏幕變窄，那麼每行的4個產品應該流入2x2甚至4x1。這我不能管理桌子了。

我想：

<div style="background-color:blue"> 
    <h3>Drinks</h3> 
    <span class="box"> 
     one<br /> 
     <img src="notexist.gif" width="100" height="100"><br /> 
     Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span> 

    <span class="box"> 
     two<br /> 
     <img src="notexist.gif" width="100" height="100"><br /> 
     Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span> 

    <span class="box"> 
     three<br /> 
     <img src="notexist.gif" width="100" height="100"><br /> 
     Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span> 
</div> 
<div> 
    <table> 
     <tr bgcolor="purple"> 
     <td>one<br /> 
      <img src="notexist.gif" width="100" height="100"><br /> 
      Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span> 
     <td>two<br /> 
      <img src="notexist.gif" width="100" height="100"><br /> 
      Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span> 
     <td>three<br /> 
      <img src="notexist.gif" width="100" height="100"><br /> 
      Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span> 
     </tr> 
    </table> 
</div> 

我所有的嘗試沒有成功。也許我走在了錯誤的道路上。我怎樣才能解決這個挑戰？

Answer 1

您可以爲.box類設置「float：left」，因此，一行中的框將調整爲屏幕大小。

CSS：

.box{ 
    float: left; 
} 

我實現你的榜樣，以 「浮動：左」 的位置：

https://jsfiddle.net/dyao1dxm/

這是你的問題？