基本的に、私は「text-align:justify」の効果を達成しようとしていますが、フローティングブロック要素を使用しています。正当化したいブロックがたくさんあります。
つまり。各行の長さが同じになるように、各行の間隔は水平方向に異なります。(不規則でない右端)。
CSSでこれを行う方法はありますか?そうでない場合、これを実現するための適切なJSライブラリはありますか?それとも、これは実行不可能ですか?
アイテムが実際に機能していない場合は、CSSに、配置された親からのオフセットに基づいてアイテムの幅を計算させるためにfloat
使用できます。position:absolute; left:1em; right:1em
float
フローを作成しようとしているブロックレベルのアイテムがあるためにのみ使用している場合はdisplay:inline-block
、アイテムをフローティングするのではなく、アイテムに使用します。親要素がtext-align:justify
これを持っている場合、あなたが望む効果(私はそれを想像します)を与えるはずです。
withの結果を示す簡単なテストを次に示します。inline-block
text-align:justify
編集:簡単なテストを更新して、最後の行を除いて左端と右端が常に整列していることをより明確に示しました。
前の回答を完了すると、プログラムで作成された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ビット)でのみテストされています。