web-dev-qa-db-ja.com

多くのインラインブロック要素を均等に配置する方法は？

Div内の多くの要素を幅を変更して均等に配置することは可能ですか？.

動作しない例 です。 text-align：centerを使用する場合;要素は中央揃えになりますが、margin：0 auto;動かない。私は正当化+センターのような何かを達成したい：

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

コンテナはユーザーがサイズ変更できます。 1枚の写真には1000語の価値があります。

enter image description here

コンテナ（赤い箱）の幅：100％;そのため、ユーザーはサイズを変更できます（ブラウザウィンドウ、jsなど）。
<->は偶数スペースを表します。 2番目の行の<->は、より多くのスペースがあるため大きくなります。私はそれを偽造することができました：

text-align:center;
Word-spacing:3em;    // but any fixed value looses proportion
htmlpositioningcss
26
CoR

私は最近、あなたが求めていることを正確に行うための非常に巧妙なテクニックについて読みました。

つまり、コンテナー要素でtext-align:justify;を使用するだけで、最後に追加の非表示ブロックを組み合わせてこれを実現できます。

これは、inline-block要素がテキストコンテンツの一部と見なされ、それぞれが事実上単一のWordであるために機能します。

justifyを使用すると、テキスト内の単語が広がり、要素の幅全体が単語間の余分なスペースで埋められます。 inline-block要素の場合、これは、それらが等間隔で間隔を空けていることを意味します。

最後に追加の不可視ブロックについて言及しました。通常のtext-align:justifyはテキストの最後の行を正当化しないため、これが必要です。通常のテキストの場合、それはまさにあなたが望むものですが、inline-blockボックスを整列させるためには、それらをすべて整列させる必要があります。

解決策は、inline-block要素のリストの最後に、見えないが幅が100％の要素を追加することです。これは事実上テキストの最後の行になるため、justifyテクニックは残りのブロックに対して機能します。

:after擬似セレクターを使用して、マークアップを変更せずに非表示要素を作成できます。

デモ用のjsFiddleの更新バージョンは次のとおりです。 http://jsfiddle.net/ULQwf/298/

そして、これをより詳細に説明する元の記事があります： http://www.barrelny.com/blog/text-align-justify-and-rwd/

[編集]質問に追加した画像を見た後の最後の更新。 （より良い答えはありませんが、役に立つかもしれないいくつかの追加の考え）。

ここで必要なのは、:last-lineセレクターです。次に、text-align:justifyをメインテキスト、text-align:centerを最終行にします。それはあなたが望むことをするでしょう。

悲しいことに、:last-lineは有効なセレクターではありません（:first-lineはそうですが、:last-lineはそうではありません）、それでその考えは終わりです。

もう少し期待できるのはtext-align-lastで、これはdoes機能として存在します。これはまさにあなたが望むことをすることができます：

text-align:justify;
text-align-last:center;

パーフェクト。

非標準であり、ブラウザのサポートが非常に限られていることを除きます。

MDNについてはこちらをご覧ください 。

ブラウザーの一部しかサポートしていない場合は、最後の手段としてそれが選択肢になると思います。少なくともユーザーのsomeに必要なものを取得します。しかし、それは実際には賢明な方法ではありません。

私の直感は、これはあなたが手に入れるのと同じくらい近いということです。あなたが望むものにそっと近いが、ちょうどそこにありません。私は間違っていると証明されることを望みますが、私は驚くでしょう。残念ですが、やりたいことは完全に論理的なことのように思えます。

36
Spudley

私はあなたの例に取り組みました、正当化だけがインライン（テキスト）で機能するので、ブロック/インラインスタイルの組み合わせを作成する必要があります。

div{
    width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
    border:1px red solid;
    text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */

}
div span{ /* I worked with your example you may use a class */
    width:60px;
    border:1px yellow solid;
    display: inline-block; /* Inline-block */ 
    position: relative; /* relative to container div*/
}

div:before{
    content: ''; /* position for block element*/
    display: block; /* the block part for the last item*/
    width: 100%;
}

div:after {
    content: '';
    display: inline-block; /* inline-block for the first (and middle elements) */
    width: 100%;
}
3
Ezequiel Gorbatik