固定寬度的項目

我設計類似Comcast的房源頁面佈局響應式設計：http://xfinitytv.comcast.net/movies 固定寬度的項目

如果你調整你的窗口，你會發現，往往是一個空白的權利的時候沒有足夠的另一張海報的空間在那裏。我想創建一個佈局，總是有一個完美的海報（沒有空間）。

問題是我無法將基於百分比的寬度應用於海報，它們保持在180px的固定寬度。我的理論是使用基於百分比的利潤率和媒體查詢，但接下來會遇到以下挫折：1）海報藝術並非始終保持粘性2）我必須使用太多的媒體查詢。它只是沒有感覺正確。

理想情況下，它可以這樣工作：如果屏幕大小在x和x之間，那麼連續有8個海報。如果屏幕尺寸在x和x之間，則連續有7張海報......等等等等。海報之間的所有空間將均勻分佈在邊緣。這樣，我們使用媒體查詢式解決方案來顯示x個海報藝術，並使用jquery來計算和分配邊距。總會有不錯的海報，總是在屏幕的最右側部分結束。

任何想法都有很好的方法來解決這個問題？它必須在瀏覽器窗口調整大小時才起作用（不僅僅是在頁面加載時）。

來源

2011-12-22 JCHASE11

的解決方案是蘇先生Tankah的智能列，但她的網站關閉。我需要jQuery代碼來測試它！ – JCHASE11 2011-12-22 15:01:15

知道了，不需要回答 – JCHASE11 2011-12-22 16:57:25

然後發佈您的答案並選擇接受的問題 – Sotkra 2012-01-21 17:29:26

這確實可以使用CSS3媒體選擇器來實現。

可以說一個coloumns的寬度爲100px，你有一個寬度爲150px的邊欄，並且元素被包裝在一個包裝內。

理想情況下，這應該使用LESS CSS或類似的方法來實現。

<div class="container"> 
    <div id="sidebar">SIDEBAR</div> 

    <div id="wrapper"> 
     <div class="coloumn">ITEM</div> 
     <div class="coloumn">ITEM</div> 
     <div class="coloumn">ITEM</div> 
     <div class="coloumn">ITEM</div> 
     <div class="coloumn">ITEM</div> 
     <div class="coloumn">ITEM</div> 
    </div> 
</div>

/*Default layout with 2 coloumns (150 + 2*100)*/ 
#sidebar 
{ 
float:left; 
width:150px; 
} 

#container 
{ 
width:350px; 
} 

/*Coloumns outer width must be 100px*/ 
.coloumn 
{ 
width:90px; 
border:1px solid #000; /*Left + right = 2px*/ 
margin-left:8px; 
background:#ccc; 
display:inline; 
} 

#wrapper 
{ 
margin-left:150px; 
width:200px; 
} 

/*3 coloumns (150 + 3*100)*/ 
@media (min-width: 450px){ 
#wrapper 
{ 
    width:300px; 
} 

#container 
{ 
width:550px 
} 
} 

/*4 coloumns (150 + 4*100)*/ 
@media (min-width: 550px){ 
#wrapper 
{ 
    width:400px; 
} 

#container 
{ 
width:550px 
} 
}

來源

2012-05-18 22:55:36

固定寬度的項目

回答

相關問題