разделите div на равные части на div

Question

задача состоит в том, чтобы сделать отдельный прогрессбар, поэтому мне нужно разделить 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> 

, но после третьего сНу (успех wrapper->) есть некоторые пробелы (выше 5 процентов). как это предотвратить? моей задачей также является создание сценария для генерации этого progressbat, поэтому здесь могут быть 3 части, 2 раздела или даже 5 частей, и решение должно быть универсальным.

Answer 1

Ну, для начала, оберточный элемент .progress имеет значение ширины, равное 99% - почему? Тогда 1% пропавших без вести пропавших без вести, поскольку вы используете только width: 33% для дочерних элементов.

Кажется, что вы установили родительский элемент в width: 99%, так как элементы .wrapper вместе занимают 99% доступного пространства. Я вижу ваше мнение, но это не так, как работает CSS.

Когда вы объявляете процентную ширину чего-либо, этот процент всегда вычисляется относительно ширины родительского элемента. Таким образом, .wrapper имеет 33% ширины .progress, тогда как .progress имеет 99% от ширины его родительского элемента, каким бы он ни был.

Изменение CSS соответственно:

.progress { 
    width: 100%; 
} 

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

Я также хотел бы использовать float: right на последнего ребенка в ряд плавающих элементов. Это должно компенсировать потенциальные проблемы округления при возникновении sub-pixels, перемещая пустое пространство на правом краю элемента влево, что затрудняет его замедление.

В вашем CSS есть еще одна проблема; то есть border на .wrapper. Border и padding -значения добавляются на ширину, поэтому ваши элементы .wrapper на самом деле 33% ширины. plus 1px каждый с границы. Это, скорее всего, поставит вам более 100% ширины, если вы установите их ширину до 33.333%, как было предложено выше, нарушив макет.

Один из способов справиться с этим просто переместить границу другого дочернего элемента (так что граница устанавливается в классы .danger, .warning и .success вместо этого), или уменьшить ширину от 33.333% к чему-то более низкой (и возможно, поплавок последнего ребенка вправо, чтобы «скрыть» пробел).

Однако метод, который я предпочитаю для обработки этой проблемы, заключается в изменении box-sizing элемента (ов) на border-box. Я не буду вдаваться в подробности об этом здесь и сейчас, но в основном он изменяет размер вычислений элемента, добавляя границы и прокладки внутри элемента, а не снаружи. Читайте об этом here, или here.