Question

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

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

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

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

有什么好的方法可以解决这个问题吗？它必须在调整浏览器窗口大小时起作用（不仅仅是在页面加载时）。

Answer 1

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

假设一个coloumns的宽度为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
}
}

具有固定宽度项目的响应式设计

1 个答案: