創建響應式產品網格。怎麼了我的寬度？

我已經創建與width:90%（填充的和10％）的容器，並且在其內部有三個display:inline的div與width:30%創建響應式產品網格。怎麼了我的寬度？

這並沒有收到預期的效果，我想三個div的可拉伸至30容器的％，從而填充整個容器。

首先去創建一些響應。我打算用最大寬度將這些圖片放在這些div中，以創建一個響應式產品網格。

正如你可以看到產品的div只是延伸到文本的大小，當我希望他們能夠擴展以填充內容區域。

CSS：

.shoppg #content{ 
    width:90%; 
    margin-top: 60px; 
    margin-left:5%; 
    margin-right:5%; 
} 

.product{ 
width:30%; 
display:inline; 
}

HTML：

<div id="content"> 
     <div class="product"> 
     product 1 
     </div> 
     <div class="product"> 
     product 2 
     </div> 
     <div class="product"> 
     product 3 
     </div> 
</div>

來源

2012-10-15 Francesca

這裏是你在找什麼：

http://jsfiddle.net/abrdn/6/

基本上，你需要將它們浮到讓他們見你的r填充以適應div的等級。

但是因爲您的最終目標是響應式設計，您需要給您的產品div設定一個固定的寬度，否則，當顯示器變得太大時，他們不會從同一排上垂直疊放小。像這樣...

http://jsfiddle.net/abrdn/10/

通知的div，而不是如何去另一行，而不是簡單地壓扁在一起，並越來越小，當你使用一個百分比寬度。

您可以擴展這個有點弗思，做一個固定min-width用百分比width允許它來填補，但後來去一個新行一旦最小寬度達到，這樣的：

http://jsfiddle.net/abrdn/12/

來源

2012-10-15 18:53:09 Dave

這絕對是完美的。我實際上並沒有計劃讓這個完全響應和可堆疊，但現在你已經幫助我，這啓發了我！我想我現在必須在標題和導航上工作。雖然看到創建響應式網格是多麼容易，但實際上並沒有我想象的那麼糟糕！ – Francesca

手動/手動學習很多這一點很重要，但是當您開始對定位感到滿意時，您應該考慮 - 「媒體查詢」（您需要在多個設備上使用相同的網站）），然後插入像'twitter bootstrap'這樣的框架，它提供了一種乾淨/整潔的方式來實現你現在正在討論的內容。 – Dave

另外，我意識到有一種更好的方式可以滿足你的需求。請參閱我的答案中的第三個例子。 – Dave

你只是忘了浮動.product

.product{ 
    float:left; 
    width:30%; 
    display:inline; 
}

如果浮動元素，則display屬性無用，但是display:inlinefixes an IE7 issue。

一些資源：

來源

2012-10-15 18:48:56 Giona

是真的，但顯示：內聯遺蹟一切 – Ibu

爲什麼@Ibu？沒有看到任何...破壞 – Giona

你能讓我知道顯示器的位置：內聯是毀了東西，所以我可以瀏覽器測試嗎？你在運行什麼系統？ – Francesca

display：inline-block; + float：left;因爲內聯塊爲框模型添加了奇怪的邊距/填充。但是不應該.product的寬度爲33.33333％，因爲您將內容的寬度除以3？然後使用寬度：100％;高度：自動;顯示：塊;爲圖像，他們將填補和整天拉伸。

來源

2012-10-15 19:23:39

創建響應式產品網格。怎麼了我的寬度？

回答

相關問題