Указание точной процентной ширины относительно родительского DIV в CSS

Я пытаюсь создать визуальный элемент, используя элементы DIV и CSS, которые должны отображать данные в формате, показанном ниже.

[----- 50% ----- | --25% - | --25% -]

При использовании кода и CSS, которые я указал ниже, мой последний элемент всегда разливается в следующую строку, а значения процентных значений CSS, которые я указываю, похоже, не создают надлежащее оформление.

Может ли кто-нибудь предложить лучший способ сделать это?

Мой HTML

<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
    25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
    25%</div>
<div class="vi-internal-element" style="width: 50%;">
    50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
    <li>
        <div class="legend-blue">
        </div>
        Sales</li>
    <li><span class="legend-tan"></span>Processed</li>
    <li><span class="legend-grey"></span>Pending Processing</li>
</ul>

Мой CSS

.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}

Ответы

Ответ 1

Причина этого в том, что при inline или inline-block пробел в элементе будет влиять на рендеринг (добавляет пробел). Вот ваша демонстрация, работающая с удаленным пробелом, никаких изменений в CSS: http://jsfiddle.net/fZXnU/

Удаление пробела не является тривиальным, поэтому вам будет лучше плавать элементы (которые запускают display:block). Рабочая демонстрация с большим количеством пробелов: http://jsfiddle.net/fZXnU/1/

Ответ 2

Вы можете использовать float: left, position: relative, а затем определить ширину в процентах, как вы.

Я изменил ваш код, чтобы использовать float здесь: http://jsfiddle.net/Z3kdP/.

Ответ 3

Если вы удаляете пробел между div, то он работает по назначению.

http://jsfiddle.net/TeJuU/

---

EDIT: см. этот вопрос: Как удалить пространство между элементами встроенного блока?

Вы можете сделать font-size: 0 в родительском элементе, если вы не хотите редактировать свой html.

http://jsfiddle.net/TeJuU/1/

Ответ 4

Все эти элементы имеют маржу и дополнение с ними, а также проценты, создающие ошибки округления при расчете. Поэтому вам нужно убедиться, что вы устанавливаете или учитываете, какая маржа делает с этим. Для ошибок округления типично, чтобы проценты составляли что-то менее 100%, но затем добавляли margin: auto, чтобы центрировать все это.