1

ここに画像の説明を入力

HTML でサイズ変更可能な水平リストを作成しようとしていますが、かなり具体的な動作がいくつかあります。ただし、それを実装するための最良の方法についてはわかりません。

割り当てられたすべての水平スペースを埋めたい固定幅アイテム (div、赤) のリストがあります。均等に広げて隙間を埋めます。ただし、すべてのアイテムを横一列に並べることができない狭い画面では、残りのアイテムを含む別の行を形成したいと考えています。これはワード ラップと同様の動作ですが、スペースが許せばアイテムは水平方向に均等に広がります。

おそらくこれには簡単な解決策があるようですが、Google にとって問題は少し複雑すぎます。

4

1 に答える 1

2

線から押し出された項目のセンタリングに苦労すると思いますが、残りの部分については、次のようにすることができます。

#main
{
    width: 100%;
    background-color: blue;
    float: left;
}

.redDiv {
    width: 16%
    background-color: red;
    height: 150px;
    margin: 2%;
    float: left;

}

この HTML 構造を考えると:

<div id="main">
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
    <div class="redDiv"></div>
</div>

デモ: http://jsfiddle.net/QwQSd/1

于 2013-03-14T09:49:19.600 に答える