Określanie dokładnej szerokości procentowej w stosunku do nadrzędnego elementu DIV w CSS

Question

Próbuję utworzyć element wizualny za pomocą elementów DIV i CSS, które powinny wyświetlać dane w formacie pokazanym poniżej.

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

Kiedy przy użyciu kodu i CSS Mam określony poniżej, moja ostateczna element zawsze rozlewa się na następny wiersz, a podane przeze mnie wartości procentowe CSS wydają się nie tworzyć poprawnie układu.

Czy ktoś może zaproponować lepszy sposób na zrobienie tego?

Moje 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> 

Moje 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; 
} 

Answer 1

Powodem takiej sytuacji jest to, że z inline lub inline-block, biała przestrzeń w elemencie wpłynie na renderingu (dodaje przestrzeni). Oto twoja wersja demo z usuniętą białą przestrzenią, bez zmian w CSS:

Usunięcie białej przestrzeni nie jest jednak łatwe, więc lepiej będzie unieść elementy (co wyzwala display:block). Demo robocze z dużą ilością pustej przestrzeni: http://jsfiddle.net/fZXnU/1/

Answer 2

Można użyć float: left, position: relative, a następnie określić szerokość w procentach jak ty.

Zmodyfikowałem twój kod, aby użyć float tutaj: http://jsfiddle.net/Z3kdP/.

Answer 3

Wszystkie te elementy zawierają margines i wypełnienie, a także wartości procentowe powodujące błędy zaokrąglania podczas obliczeń. Musisz więc upewnić się, czy ustalasz, czy bierzesz pod uwagę, jaki margines na to robi. W przypadku błędów zaokrąglania typowe jest, że wartości procentowe sumują się do wartości mniejszej niż 100%, a następnie dodajemy margines: auto, aby wyśrodkować całość.

Answer 4

Jeśli usuniesz białą przestrzeń między div s, to działa zgodnie z przeznaczeniem.

http://jsfiddle.net/TeJuU/

---

EDIT: Patrz na to pytanie: How to remove the space between inline-block elements?

Można zrobić font-size: 0 na elementu nadrzędnego, jeśli nie chcesz zmieniać kodu HTML.

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