Question

我在我的主页上使用这个CSS代码的几个div框：

#homepagebox {
    width:80%;
    margin:0 auto 0 auto;
}
#homepagebox .column {
    float: left;
    width: 25%;
}
#homepagebox .column div {
    margin: 15px;
    min-height: 300px;
    max-height:300px;
    color:#ffffff;
    background: #666666;
    border-radius:10px;
}

当屏幕太小时，我需要它们开始在彼此之下显示但是很明显，如果屏幕足够大，那么所有屏幕都显示在彼此旁边。

此刻，如果屏幕太小，则框会变得更小

这是一个小提琴：http://jsfiddle.net/LEvzs/

Answer 1

#homepagebox .column {
    float: left;
    min-width: 25%;
}

如果以百分比形式设置宽度，则永远不会达到需要将内容包装到下一行的程度。将其设置为最小宽度可确保它们永远不会收缩到该点以下，因此会换行。

[edit]更新小提琴有一个固定的宽度，但在需要时仍然换行。

#homepagebox .column {
    float: left;
    width: 25%;
    min-width: 200px;
}

http://jsfiddle.net/LEvzs/2/

CSS Div框不会彼此相互影响

1 个答案: