1

このデモのように「display:inline-block」を使用してフレックス列を含むページを作成しましたが、空白と改行の問題に遭遇しました:

.leftと.rightは両方ともですwidth:50%が、それらの間に空白と改行があるため、実際には 100% 以上の幅を占めるため.right、次の行に移動します。

<!--demo 1-->
<div class="container">
    <div class="left box">
    </div>
    <div class="right box">
    </div>
</div>

と の間の空白と改行を削除する.leftと.right機能し、現在は同じ行にありますが、HTML の表現力は低下しています。

<!--demo 2-->
<div class="container">
    <div class="left box">
    </div><div class="right box">
    </div>
</div>

とにかく、インデントを維持するには？

4

1 に答える 1

3

働くフィドル

CSS に 2 つのクラスを追加します。

.lfloat {
    float: left;
}

.clrflt {
    clear: both;
}

HTML コードを次のように変更します。

<!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt></div>
</div>

編集済み

inline-blocking は 4px の境界線を追加します (これによりdiv、次の行に移動します)。したがって、floatより好ましい方法です。

を使用するこのフィドルを見ることができますdisplay:inline-block：

<html>
    <head>
        <style>
        *{padding:0;margin:0}
        ul#container{width:204px}  //Had to add 4px for extra width
         ul#container li{display:inline-block;height:100px;width:100px;background:#666}
        .left{width:50%}
        .right{width:50%;background:#0ca}
        </style>
    </head>
    <body>
        <ul id="container">
           <li>Left</li>
           <li>Right</li>
        </ul>
    </body>
    </html>

これらの問題の詳細については、こちらのブログをご覧ください。

于 2012-07-02T03:34:17.083 に答える