Chỉ định chiều rộng phần trăm chính xác liên quan đến DIV gốc trong CSS

Tôi đang cố tạo phần tử hình ảnh bằng các phần tử DIV và CSS sẽ hiển thị dữ liệu theo định dạng được minh họa bên dưới.Chỉ định chiều rộng phần trăm chính xác liên quan đến DIV gốc trong CSS

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

Khi sử dụng mã CSS và tôi đã chỉ định dưới đây, tôi thức phần tử luôn tràn vào dòng tiếp theo và các giá trị phần trăm CSS mà tôi chỉ định dường như không tạo bố cục đúng cách.

Ai đó có thể đề xuất cách tốt hơn để làm điều này?

HTML My

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

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

Nguồn

2011-11-04 Nick

Lý do điều này xảy ra là với inline hoặc inline-block, khoảng trắng trong yếu tố sẽ ảnh hưởng đến vẽ (thêm không gian). Đây là bản demo của bạn hoạt động với không gian màu trắng đã bị xóa, không có thay đổi nào đối với CSS: http://jsfiddle.net/fZXnU/

Xóa phần trắng là không nhỏ, vì vậy bạn nên thả nổi các phần tử (kích hoạt display:block). Bản trình diễn làm việc với nhiều không gian màu trắng: http://jsfiddle.net/fZXnU/1/

Nguồn

2011-11-04 14:00:05

Bạn có thể sử dụng float: left, position: relative, và sau đó xác định chiều rộng theo tỷ lệ phần trăm như bạn đang có.

Tôi đã sửa đổi mã của bạn để sử dụng float tại đây: http://jsfiddle.net/Z3kdP/.

Nguồn

2011-11-04 13:52:25

Tất cả các yếu tố đó có lề và đệm với chúng cũng như tỷ lệ phần trăm tạo ra lỗi làm tròn trong khi tính toán. Vì vậy, bạn cần phải chắc chắn rằng bạn thiết lập, hoặc đi vào xem xét, những gì lợi nhuận là làm điều này. Đối với các lỗi làm tròn, nó là điển hình để cho tỷ lệ phần trăm thêm vào một cái gì đó ít hơn 100% nhưng sau đó thêm lề: tự động để trung tâm toàn bộ điều.

Nguồn

2011-11-04 13:56:34 Rob

Chúng thực sự không có lề, đó là vấn đề về không gian khi sử dụng 'inline-block'. –

@JamesMontagne - Hầu như tất cả các phần tử đều có lề theo mặc định. – Rob

Không thực sự, kiểm tra nó trong firebug hoặc kiểm tra yếu tố trong chrome, không có lợi nhuận. –

Nếu bạn loại bỏ khoảng trắng giữa div giây thì nó hoạt động như dự định.

http://jsfiddle.net/TeJuU/

EDIT: Xem câu hỏi này: How to remove the space between inline-block elements?

Bạn có thể làm font-size: 0 trên yếu tố phụ huynh nếu bạn không muốn chỉnh sửa html của bạn.

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

Nguồn

2011-11-04 13:59:31