0

ホームページのいくつかの div ボックスにこの CSS コードを使用しています。

#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/

4

1 に答える 1

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

幅をパーセンテージで設定すると、コンテンツを次の行に折り返す必要が生じることはありません。これを min-width として設定すると、そのポイントを下回ることはなく、折り返されます。

[編集] 固定幅を持つようにフィドルを更新しますが、必要に応じて折り返します。

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

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

于 2013-04-16T16:50:52.810 に答える