1

我正在设计一个类似于 Comcast 的列表页面的布局：http: //xfinitytv.comcast.net/movies

如果您调整窗口大小，您会注意到右侧通常有一个空白区域，而此时没有足够的空间放置另一张海报。我想创建一个总有完美贴合海报的布局（右侧没有空间）。

问题是我不能将基于百分比的宽度应用于海报，它们保持在 180 像素的固定宽度。我的理论是使用基于百分比的边距和媒体查询，但是有以下挫折：1）海报艺术并不总是粘在右边 2）我必须使用太多的媒体查询。只是感觉不对。

理想情况下，它会像这样工作：如果屏幕尺寸在 x 和 x 之间，那么一排有 8 张海报。如果屏幕尺寸在 x 和 x 之间，则连续有 7 张海报……以此类推。海报之间的所有空间都将均匀分布在边缘。这样，我们使用媒体查询式的解决方案来显示 x 个海报艺术，并使用 jquery 来计算和分配边距。总会有合适的海报，总是在屏幕的最右边结束。

关于解决此问题的好方法有什么想法吗？它必须在调整浏览器窗口大小时工作（不仅仅是在页面加载时）。

4

1 回答 1

2

这确实可以使用 CSS3 媒体选择器来实现。

假设一个列的宽度为 100 px，您有一个宽度为 150 px 的侧边栏，并且元素被包裹在一个包装器中。

理想情况下，这应该使用 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 回答