響應式佈局，divs中有多個div

我一直在嘗試爲我的網站製作一些響應式佈局。但是我在項目上遲到了，而且我沒有開始，這意味着我的基本模板有很大的缺陷。我想知道如何製作此類模板？我相信製作一個這樣的模板非常簡單（在圖中），但我並不真正瞭解div是如何隨意移動的，而不是像我指揮的那樣。響應式佈局，divs中有多個div

我想從那張照片中得到的東西正是那裏寫的。由於瀏覽器視圖端口較小，div應該按照我在圖像中示例的方式運行。

如果反正可以點我如何使這樣的事情我會很感激:)

這裏是鏈接到圖片：http://i.imgur.com/8n0TOlo.jpg

來源

2014-04-01 Ted

我是PocketGrid的作者，這是一個用於響應式佈局的微型CSS網格。

正如Luca建議的那樣，您可以使用PocketGrid進行佈局。

我做了的jsfiddle你：http://jsfiddle.net/arleray/5Mvph/

的HTML是非常簡單的：

<div id="LAYOUT" class="block-group"> 
    <div id="HEADER" class="block"> 
     <div class="box">HEADER</div> 
    </div> 
    <div id="WORK_AREA" class="block-group"> 
     <div id="LEFT_BAR" class="block"> 
      <div class="box">LEFT_BAR</div> 
     </div> 
     <div id="CONTENT" class="block"> 
      <div class="box">CONTENT</div> 
     </div> 
    </div> 
    <div id="TOOLBOX" class="block-group"> 
     <div class="TOOLBOX_ITEM block"> 
      <div class="box">TOOLBOX ITEM</div> 
     </div> 
     <div class="TOOLBOX_ITEM block"> 
      <div class="box">TOOLBOX ITEM</div> 
     </div> 
     <div class="TOOLBOX_ITEM block"> 
      <div class="box">TOOLBOX ITEM</div> 
     </div> 
    </div> 
</div>

對於你的CSS，我建議你使用「移動第一」的策略：

1 - 從「移動」版本（最小）開始：

#LAYOUT { min-width: 800px; } 
#HEADER { height: 30px; } 
#WORK_AREA { width: 100%; } 
#LEFT_BAR { width: 300px; } 
#CONTENT { 
    overflow: hidden; /* Trick to fill the remaining space */ 
    float: none; 
    width: auto; 
} 
#TOOLBOX { 
    min-width: 300px; 
    width: 100%; 
}

2 - 然後加入媒體查詢放大版本（> 1100px），以僅添加從移動版本更改：

@media (min-width: 1100px) { 
    #WORK_AREA { width: calc(100% - 300px); } 
    #TOOLBOX { width: 300px; } 
}

對於流體內容寬度，我使用的「overflow:hidden」特技使其填充剩餘在LEFT_BAR之後的WORK_AREA空間。儘管如此，爲了使右側的固定工具欄具有WORK_AREA流體，我無法使用「overflow：hidden」（因爲它填充了右側的剩餘空間）。
所以我不得不使用calc()函數來計算WORK_AREA寬度，因爲右邊是固定寬度的工具箱。

注意：在計算（）函數只兼容Android 4.4或以上版本（http://caniuse.com/calc），但它是唯一的平均值（純CSS）來對右邊欄左側的流體WORK_AREA，因爲工具箱在WORK_AREA之後聲明。
您可以嘗試使用這種計算（）填充工具（在JS）：https://github.com/CJKay/PolyCalc

要使用「溢出：隱藏」欺騙，而不是計算（）函數，你應該把你的工具箱中的WORK_AREA之前，想在這個其他的jsfiddle：http://jsfiddle.net/arleray/5Mvph/11/

更多有關PocketGrid，你可以在這裏看到很多例子：http://arnaudleray.github.io/pocketgrid/docs/

希望這有助於！

來源

2014-04-07 09:48:37 Arnaud

你是一位神。我崇拜你！我的意思是！謝謝！有沒有像內容也一樣下降，工具箱的方式一樣？ – Ted

您可以使用CSS媒體查詢是指media queries here或者你可以使用框架，如Bootstrap。這將幫助您根據設備大小控制div。

來源

2014-04-01 11:32:15

但我如何獲得我想要的模板？ – Ted

從引導中使用網格系統。 http://getbootstrap.com/css/#grid它會幫助你製作像你的佈局一樣的顏色。 –

嘗試bootstrap.It會讓你的生活方便的鏈接是here。希望可以幫助

來源

2014-04-01 11:32:43 Aameer

我建議你另外一個非常非常簡單，簡約網格系統：PocketGrid。只有1 KB縮小。根據演示和描述拍攝。 ;-)

來源

2014-04-01 12:51:02

響應式佈局，divs中有多個div

回答

相關問題