最大宽度和最小宽度均匀分布的DIV

我想创建一个布局，其中每个DIV的最大宽度为300px。最大宽度和最小宽度均匀分布的DIV

如果屏幕是600px，那么两个100％的div应该彼此相邻放置。如果屏幕是700px，那么三个233px（每个DIV 100％）应该彼此相邻放置。

这意味着DIV应该总是占据屏幕宽度的100％。

我也想有一个最小宽度（如150px），以便每个DIV不能小于一定的数量。

这意味着，在一个小屏幕上，我可能会得到带DIV的两列，并且在大的范围内，我可能会得到带有DIV的四列或更多列。

来源

2013-06-02 Patrik

您是否希望它们始终为300px，或者您希望它们随着屏幕变小到最大150px而缩小，然后创建另一行？ – mclaassen

是的，我希望他们能够缩小屏幕变小。 – Patrik

在这个例子中，当屏幕大于900px时，会有4列，当屏幕点击900px时，会下降到3列，当屏幕点击600px时，会下降到2列，当它达到300px时，会有一列。这将让div的占用屏幕，最大宽度为100％，将永远是300像素（除了屏幕大于1200像素宽，你仍然会得到4列）

div { 
    width: 25%; /* anything above 900px and there will be 4 columns */ 
    min-width: 150px; 
    float: left; 
    height: 200px; 
    } 

    @media screen and (max-width: 900px) { 
    div { width: 33%; } 
    } 

    @media screen and (max-width: 600px) { 
    div { width: 50%; } 
    } 

    @media screen and (max-width: 300px) { 
    div { width: 100%; } 
    }

这可以被修改为具有任意数量的列和任何数量的不同的阈值屏幕大小，其中列数将改变。

如果您有边框或边距，您还必须使宽度％s略小。

来源

2013-06-02 20:37:22 mclaassen

它接近我想要的，但仍然有一些屏幕尺寸会留下一些空白的右侧。请看这里：http：//jsfiddle.net/ezdMn/3/ – Patrik

它的边界，它打破它。改为使用不同的背景颜色，或者让％s略小一些。 – mclaassen

完美的作品。谢谢！ – Patrik

div 
{ 
width:33.3333%; 
    min-width:150px; 
    max-width:300px; 
    display:inline-block; 
    background:#EFEFEF; 
    border:1px solid #CCC; 
    height:100px; 
}

我没有测试过（今天），但我认为这会工作，直到达到最小尺寸。

来源

2013-06-02 20:35:58

这不起作用（div不占用屏幕的100％） – mclaassen

最大宽度和最小宽度均匀分布的DIV

回答

相关问题