0

サイズの異なる箱がたくさんあります。サイズは不明です。言葉と同じCSS仕様を使いたいtext-align:justifyです。例えば：

ここに画像の説明を入力してください

CSSまたはCSS3で解決策が欲しいのですが。不可能な場合は、JSを使用できます。

4

2 に答える 2

3

考えられる CSS ソリューション

ボックスが に設定されている場合は、テキストの場合と同じようにdisplay:inline-block適用できます。ただし、テキストの最終行には影響しないtext-align:justifyことに注意してください。text-align:justifyしたがって、正当化する必要がある行が 1 行だけの場合は、何も起こりません。

HTML を変更できる場合の 1 つの回避策は、幅 100% の末尾要素を追加して、正当化するコンテンツが最終行にならないようにすることです。ソース HTML を変更できない場合は、JavaScript を使用して末尾の要素を追加できます。

これを示すjsfiddleを次に示します。IE6/7/8/9、Firefox、Chrome、Safari でテスト済み。(注:  IE6/7 で動作させるには、ボックス間に a を追加する必要がありました)。

于 2012-10-06T19:59:40.623 に答える
2

以下に少し例を示します。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        #container {
            width: 500px;
            margin: 0 auto;
            font-size: 0; /* Fixed space caused by line breaks */
        }
        #container .inner {
            display: inline-block;
            background: red;
            width: 25%;
            border: 10px rgba(255,255,255,1) solid;
            padding: 5px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>

<div id="container">
    <div class="inner">Lorem</div>
    <div class="inner">Ipsum</div>
    <div class="inner">Dolor</div>
    <div class="inner">Sit</div>
</div>

</body>
</html>

これは軽度の不正行為と見なされます。要素間の余白として白い境界線を使用しています。親の背景が単色の場合にのみうまく機能します。

注意点：

  • box-sizing: border-boxすべての要素で、width: 25%内部にパディングとボーダーが含まれていることを確認します。
  • 白い境界線を使用して余白の効果をシミュレートします。
  • font-size: 0親と子でを使用するとfont-size: 16px、インライン ブロック要素間の改行によって生じる空白がなくなります。
于 2012-10-06T21:51:09.237 に答える