0

かなり長い間、私は偶然見つけた非常に優れた列スパニング メソッドを使用してきました。そこでは、クラス.boxcontainerと子.box要素を含む div を作成し、:after疑似要素 onを使用して.boxcontainer、私の.box列はページ全体で適切かつ均等に配置されます。 . 重要な定義は次のとおりです。

.boxcontainer {
    text-align:                 justify;
    -ms-text-justify:           distribute-all-lines;
    text-justify:               distribute-all-lines;
    background-color:             orange;
}

.boxcontainer:after {
    content:                    '';
    display:                    inline-block;
    width:                      100%;
    height:                     0px;
    font-size:                  0px;
    line-height:                0px;
}

私の以前のプロジェクトのほとんどはXHTML1 Transitionalであり (その後、他の DTD と比較して限定的な quirks モードを使用していることを知りました)、XHTML1 でこのメソッドを使用すると、親.boxcontainerは常に子.box要素を完全にフラッシュします。

しかし、HTML5 で新しいプロジェクトに取り組んでいると、正当化された.box要素の下に余分な行が追加されているように見えることがわかりました。ここで例を見ることができます: http://jsfiddle.net/RZQTM/1/ - Fiddle Optionsをクリックし、DTD を他のものに変更すると、私の言いたいことがわかります - オレンジ色の「バンド」が正当化された青いボックス。

これは、疑似要素がコンテンツの追加行のようにレンダリングされていることが原因だと思いますが、修正方法がわかりません。:afterボックスの下の余分なスペースを削除する方法に関するヒントは、非常にありがたいものです。

4

2 に答える 2

5

この余分な行を消すために使用するトリックはline-height:0;、親に適用し、line-height1.2em または設定した行の高さにリセットすることです。vertical-align:top;/* または bottom */ on :after 要素が残っている垂直方向のギャップを飲み込むまでになります。

一例: http://codepen.io/gcyrillus/pen/dlvCp

于 2013-07-08T20:49:02.560 に答える