顯示內容水平，但是當堆疊時屏幕寬度不允許

當寬度是什麼是並排顯示內容側的最佳實踐中有諸如：顯示內容水平，但是當堆疊時屏幕寬度不允許

[內容] [內容] [內容] [內容]

但是，當屏幕尺寸不夠大的內容自動堆疊：

[內容]

我想以最簡單的方式做到這一點，而無需加載框架，如bootstrap。如果有幫助，我的內容確實使用jQuery。

我的應用程序是一個移動HTML網站，需要在平板電腦或臺式電腦等大屏幕上看起來不錯。我的內容將在div中。

這將是很好，如果第一次去：

[內容] [內容]

來源

2014-02-13 Michael Fever

我將在[響應式設計（HTTPS讀了起來：//谷歌。 COM /搜索？q =響應+設計）。 –

最簡單的方法解決了我的問題。如果你有同樣的問題，請檢查演示。 3行css。 –

你想要這種行爲嗎？

如果是，那麼float是，你應該尋找

Check Demo

來源

2014-02-13 04:17:01 Saurabh

這工作完美，非常簡單，易於實施。 –

有一件事，對不起，但內容對齊左邊..有什麼辦法讓它居中？ –

@MichaelDeMutis float屬性將元素左對齊或右對齊。 – Saurabh

您需要使用媒體查詢來實現這一目標。

Google for CSS媒體查詢

來源

2014-02-13 04:15:36 comrade

CSS屬性有兩種可能的方式來完成這項

a）使用最小寬度&浮動：左屬性

最小寬度將確保您的div不會小於指定大小&向左浮動將確保如果有空間fo r除以元素可以上去

 <html> 
     <head> 
     <style type='text/css'> 
     body{ 
      width:100%; 
      height:100%; 

     } 
     body div{ 
      float:left; 
      width:33%; 
      height:200px; 
      min-width:200px; 
     } 
      .width1{ 
      background-color:red; 
      } 
      .width2{ 
      background-color:green; 
      } 
      .width3{ 
      background-color:blue; 
      } 
     </style> 

     <body> 


      <div class="width1"></div> 
      <div class="width2"></div> 
      <div class="width3"></div> 

     </body> 

     </html>

b）第二，更高效的方式來做到這一點是使用媒體查詢

 <html> 
     <head> 
      <style type='text/css'> 
     body{ 
      width:100%; 
      height:100%; 

     } 
     body div{ 
      float:left; 
      width:33%; 
      height:200px; 
     } 
      .width1{ 
      background-color:red; 
      } 
      .width2{ 
      background-color:green; 
      } 
      .width3{ 
      background-color:blue; 
      } 

     @media only screen and (max-width: 800px) { /* for 640px screen set size of div to 50%; */ 
      body div{ 
      width:50%; 
      } 
     } 

      @media only screen and (max-width: 480px) { /* for smaller screen set size of div to 100%; */ 
      body div{ 
      width:100%; 
      } 
     } 
     </style> 

     <body> 


      <div class="width1"></div> 
      <div class="width2"></div> 
      <div class="width3"></div> 

     </body> 

     </html>

來源

2014-02-13 04:25:26 sanjeev

雖然我不懷疑你的方法會起作用，但我正在尋找一種更簡單的方法，而無需使用@media css規則。 –

然後最小寬度的第一種方法！是爲你@MichaelDeMutis – sanjeev

我看@sanjeev，但我也希望箱子在同一時間集中..怎麼樣？ –

顯示內容水平，但是當堆疊時屏幕寬度不允許

回答

相關問題