12

基本的に、私は「text-align:justify」の効果を達成しようとしていますが、フローティングブロック要素を使用しています。正当化したいブロックがたくさんあります。

つまり。各行の長さが同じになるように、各行の間隔は水平方向に異なります。(不規則でない右端)。

CSSでこれを行う方法はありますか?そうでない場合、これを実現するための適切なJSライブラリはありますか?それとも、これは実行不可能ですか?

4

2 に答える 2

13

アイテムが実際に機能していない場合は、CSSに、配置された親からのオフセットに基づいてアイテムの幅を計算させるためにfloat使用できます。position:absolute; left:1em; right:1em

floatフローを作成しようとしているブロックレベルのアイテムがあるためにのみ使用している場合はdisplay:inline-block、アイテムをフローティングするのではなく、アイテムに使用します。親要素がtext-align:justifyこれを持っている場合、あなたが望む効果(私はそれを想像します)を与えるはずです。

withの結果を示す簡単なテストを次に示します。inline-blocktext-align:justify

編集:簡単なテストを更新して、最後の行を除いて左端と右端が常に整列していることをより明確に示しました。

于 2010-12-06T22:48:37.870 に答える
1

前の回答を完了すると、プログラムで作成されたDOMノードを整列させたい場合(たとえば、javaScriptでdocument.createElementとparentElement.appendChildを使用して)、整列された要素の間に空白は追加されません。これにより、アラインメントが機能しなくなる可能性があります。

私のGoogleChrome56.0.2924.87およびFirefox51.0.1(64ビット)ブラウザーでは、div要素を区切る空白がない場合、整列は機能しません。

https://jsfiddle.net/jc5qwyaw/

javaScriptでDOMノードを作成する例があります。

https://jsfiddle.net/oa8yeudr/

コマンドのコメントを外すwrapDiv.appendChild(document.createTextNode(" "));と、違いがわかります。考えられる解決策は、上記の例のように、divノードの後に​​空白テキストノードを追加することです。

Chrome56.0.2924.87およびFirefox51.0.1(64ビット)でのみテストされています。

于 2017-02-07T18:27:57.590 に答える