1

Comcast のリスト ページに似たレイアウトを設計しています: http://xfinitytv.comcast.net/movies

ウィンドウのサイズを変更すると、別のポスターを表示するスペースが十分にない場合でも、右側に空白のスペースができることがよくあります。ポスターが常にぴったり収まるレイアウトを作成したい (右側にスペースがない)。

問題は、ポスターにパーセンテージベースの幅を適用できないことです。ポスターは 180px の固定幅のままです。私の理論では、パーセンテージ ベースのマージンとメディア クエリを使用することでしたが、次のような欠点があります。それはちょうど正しく感じませんでした。

理想的には、次のように動作します。画面サイズが x と x の間にある場合、8 枚のポスターが一列に並んでいます。画面サイズが x と x の間の場合、ポスターが 7 枚並んでいます。また、ポスター間のすべてのスペースは余白に均等に配分されます。このように、メディア クエリ風のソリューションを使用して x 数のポスター アートを表示し、jquery を使用してマージンを計算して分配します。ポスターは常に画面の一番右端で終わります。

これについて何か良い方法はありますか？ブラウザー ウィンドウのサイズが変更されたときに (ページの読み込み時だけでなく) 動作する必要があります。

4

1 に答える 1

2

これは実際、CSS3 メディア セレクターを使用して実装できます。

1 つの列の幅が 100 ピクセルで、幅が 150 ピクセルのサイドバーがあり、要素がラッパー内にラップされているとします。

理想的には、これは 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-18T22:55:36.553 に答える