7

表示タイプdivを使用してインラインでフローするようにスタイル設定された固定幅要素がたくさんあります。inline-blockこれにより、行末に空のスペースが残ります (次のdiv行が収まらず、次の行に折り返されません)。

私がやりたいのは、行のすべての div を均等に展開して行を埋めることです。これは、テキストの「両端揃え」配置と同様です。

言い換えれば、要素の幅を最小限に抑えdiv、できるだけ多くの要素を 1 つの行に収めて、行全体を埋めたいと考えています。

これが私のサンプルHTMLです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
        #container { margin: 100px; padding: 10px; border: 1px solid blue; }
        .item { margin: 10px; width: 300px; min-width: 300px; display: inline-block; border: 1px solid red; }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">Item One</div>
        <div class="item">Item Two</div>
        <div class="item">Item Three</div>
        <div class="item">Item Four</div>
    </div>
</body>
</html>

純粋なCSS + HTMLでそれは可能ですか? または、この結果を得るためにスクリプトを作成する必要がありますか?

更新:パーセンテージ幅を使用してアイテムを1行に収めることを人々が提案し続けているため、この質問の意図ではないことに注意する必要があります。「両端揃え」テキストのようなものが必要ですが、ブロックが必要です。アイテムの数は可変であり、多すぎる場合があります。

ブロックは同じサイズである必要があり、必要に応じて次の行に折り返されるデフォルト (最小) の幅が必要です。コンテナの幅は、幅を拡張して子アイテムで満たす必要があります。

更新 2:

現在のサンプルは次のようなものを生成します:

|--------------------------- Container -----------------------------|
| |------ 1 ------| |------ 2 ------| |------ 3 ------|             |
| |------ 4 ------| |------ 5 ------| |------ 6 ------|             |
| |------ 7 ------|                                                 |

私はこのようなものを見たいと思っています:

|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |-------- 7 --------|                                             |

またはこれ：

|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |------------------------------ 7 ------------------------------| |

各アイテムには最小サイズがあるため、上記の例では、アイテム #4 と #7 は行の残りのスペースに収まらず、次の行に折り返されます。スペースを埋めるために、すでにラインに取り付けられているものを希望します。

ブラウザのサイズを変更できるため、コンテナのサイズが変更される場合があることに注意してください。したがって、2 つのアイテムだけが連続して収まる程度まで小さくなる場合は、次のように表示したいと思います。

|----------------- Container -----------------|
| |-------- 1 --------| |-------- 2 --------| |
| |-------- 3 --------| |-------- 4 --------| |
| |-------- 5 --------| |-------- 6 --------| |
| |------------------- 7 -------------------| |

これで質問の意図が明確になることを願っています。

4

3 に答える 3

1

これは Flexbox の仕事ですが、Flexbox 以外のブラウザーでどのようにレイアウトするかを決める必要があります。物事を中央に揃えることが最善の策かもしれません。

http://codepen.io/cimmanon/pen/lBDwu

ul {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  text-align: center;
  /*  text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;*/
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

li {
  display: inline-block;
  -webkit-flex: 1 0;
  -ms-flex: 1 0;
  flex: 1 0;
  min-width: 10em;
  background: #CCC;
  border: 1px solid;
  margin: .5em;
}

ラッピングが必要なため、Chrome、Opera、および IE10 のみがこれを行うことができます。他のすべての人は、フォールバック エクスペリエンスを受け取ります。

于 2013-04-21T13:31:54.260 に答える