0

タスクは個別のプログレスバーを作成することなので、div 1-2-3-4-...n 回を分割する必要があります。ここにコードがあります：

.progress {
    width:  99%;
    height: 15px;
    padding: 0px;
}
.progress .danger {
    background-color: #dd514c;
}
.progress .warning {
    background: #ffaf4b;
}
.progress .success {
    background-color: #5eb95e;
}
.wrapper {
    border-left: 1px solid #7e7d7d;
}
.progress div {
    float: left;
}
<div class="progress">
    <div class="wrapper" style="width: 33%;">
        <div class="danger" style="width: 20%;"></div>
    </div>
    <div class="wrapper" style="width: 33%;">
        <div class="warning" style="width: 20%;"></div>
    </div>
    <div class="wrapper" style="width: 33%;">
        <div class="success" style="width: 100%;"></div>
    </div>
</div>

しかし、3 番目の div (wrapper->success) の後に、いくつかの空白 (5% 以上) があります。それを防ぐ方法は？私の仕事は、このプログレスバットを生成するためのスクリプトを作成することでもあるため、ここでは 3 つの部分、2 つの部分、さらには 5 つの部分である可能性があり、解決策は普遍的である必要があります。

4

1 に答える 1

1

まず、ラッピング要素.progressの幅の値が に設定されています99%- なぜでしょうか? width: 33%次に、子要素にのみ使用するため、1% の欠落が自然に欠落しています。

要素が一緒になって使用可能なスペースの 99% を占めるwidth: 99%ため、親を に設定したように見えます。.wrapperあなたの考えはわかりますが、それは CSS の仕組みではありません。

何かのパーセンテージ幅を宣言すると、そのパーセンテージは常に要素の親の幅に関連して計算されます。したがって、.wrapperは の幅の 33% を持ち、親の幅の 99%.progressを持ちます。.progress

それに応じて CSS を変更します。

.progress {
    width: 100%;
}

.wrapper {
    width: 33.333%; /* remove the inline CSS and use this instead */
}

また、浮動要素の行の最後の子でfloat: right使用することも好きです。これは、サブピクセルが発生し、要素の右端の空白が左に移動して、認識しにくくなる場合の潜在的な丸めの問題を補うためです。

CSS にはもう 1 つの問題もあります。それがborderオン.wrapperです。Borderおよびpadding-value は幅の上に追加されるため、.wrapper要素は実際には幅が 33%に加えて、境界線からそれぞれ 1 ピクセルになります。上記のように幅を 33.333% に設定すると、幅が 100% を超える可能性が高くなり、レイアウトが崩れます。

これを処理する 1 つの方法は、単純に境界線を別の子要素に移動する (境界線がクラス.dangerに設定されるようにする) か、幅.warningを.success33.333% からそれよりも低い値に減らす (そしておそらく最後の子要素を空白を「隠す」権利）。

ただし、この問題を処理するために私が好む方法box-sizingは、要素のを に変更することborder-boxです。ここでは詳しく説明しませんが、要素のサイズの計算方法が基本的に変更され、要素の外側ではなく内側に境界線とパディングが追加されます。ここ、またはここでそれについて読んでください。

于 2013-06-02T07:36:21.167 に答える