固定宽度的项目

我设计类似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

固定宽度的项目

回答

相关问题