Đồ thị thanh CSS - rất đơn giản

Question

Tôi có một số mã rất cơ bản và nó hoạt động ngoại trừ mọi thứ liên kết với đầu ... lý tưởng là các thanh sẽ căn chỉnh về phía dưới. Tôi cho rằng tôi có thể sử dụng vị trí cố định vì các kích thước được bình phương ở 50px x 50px nhưng tôi thích thứ gì đó ít "cố định" hơn.

 <div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;"> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div> 
     </div> 

Tôi không muốn sử dụng thư viện hoặc JS thêm vào. Giữ trọng lượng nhẹ này là nhiệm vụ quan trọng.

Ngoài ra tôi muốn các thanh thẳng đứng hơn. Bất kỳ CSS guru chăm sóc để làm sáng tỏ một chút ánh sáng tôi dường như bị thiếu? Tôi đã googled và hầu hết các ví dụ là xa để phức tạp/tinh vi,

Answer 1

Trước hết, hãy tách CSS của bạn khỏi HTML của bạn. Bạn đang lặp lại quá nhiều mã khi bạn chỉ có thể sử dụng một lớp bar cho div bên trong của bạn.

bottom: 0 không thay đổi bất cứ điều gì cho div vị trí tương đối.

Nếu bạn muốn sử dụng vị trí tương đối, loại bỏ phao và đáy và sử dụng display: inline-block và vertical-align: baseline;. Ngoài ra, trong trường hợp này, bạn cần phải loại bỏ bất kỳ khoảng trống nào trong HTML giữa các div bên trong (dòng mới).

Như thế này (bạn có thể xem demo tại http://dabblet.com/gist/2779082):

HTML

<div class="graph"> 
     <div style="height: 22px;" class="bar"></div><!-- 
     --><div style="height: 11px;" class="bar"></div><!-- 
     --><div style="height: 6px;" class="bar"></div><!-- 
     --><div style="height: 49px;" class="bar"></div><!-- 
     --><div style="height: 28px;" class="bar"></div> 
</div> 

CSS

.graph { 
    width: 50px; 
    height: 50px; 
    border: 1px solid #aeaeae; 
    background-color: #eaeaea; 
} 
.bar { 
    width: 8px; 
    margin: 1px; 
    display: inline-block; 
    position: relative; 
    background-color: #aeaeae; 
    vertical-align: baseline; 
} 

Answer 2

Sử dụng position: absolute, và thay vì sử dụng float:left;left: 0px;, 8px, 16px và vân vân.
Cũng thêm position: relative vào vùng chứa.

Answer 3

Kolink của câu trả lời là đúng. Chiều rộng của mỗi thanh div là 8px, cộng với lề trái và lề phải, 8 + 1 + 1 = 10px. Vì vậy, tôi đề nghị, thiết lập giá trị trái để 0px, 10px, 20px ...

<div class="wrapper"> 
    <div style=" left:0px;height:22px;"></div> 
    <div style="left:10px;height:11px;"></div> 
    <div style="left:20px;height:6px;"></div> 
    <div style="left:30px;height:49px;"></div> 
    <div style="left:40px;height:28px;"></div> 
</div> 

Các css nên giống như thế này (tôi nhóm lại một số quy tắc css chung):

.wrapper{ 
    border: 1px solid #aeaeae; 
    background-color: #eaeaea; 
    width: 50px; 
    height: 50px; 
    position : relative; 

} 

.wrapper > div{ 
    bottom: 0px; 
    width: 8px; 
    position : absolute; 
    background-color: #aeaeae; 
    margin: 1px; 
    display : inline-block; 

} 

Bạn có thể kiểm tra điều này liên kết: http://jsfiddle.net/zhujy_8833/AFbt4/ để xem kết quả của mã trên.

Answer 4

Cá nhân tôi sẽ tránh đặt xpos một cách rõ ràng trên mọi thành phần, làm cho mọi thứ ít bảo trì hơn. Trong một số bãi chứa tỷ lệ phần trăm dựa trên scenarious cũng sẽ phù hợp hơn. Với ý nghĩ đó, một cách tiếp cận chính xác hơn và có khả năng mở rộng theo phương pháp imo đã được mô phỏng trong một fiddle. HTML:

<ul class="graph"> 
    <li><span style="height:45%"></span></li> 
    <li><span style="height:12%"></span></li> 
    <!--as many more items as you want !--> 
</ul> 

và CSS:

.graph { 
    border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/ 
    float:left; /*should be clearfix'd instead, but this is OK for a demo*/ 
} 
.graph li { 
    width:8px; height:50px; /*set a bar width and a full height*/ 
    float:left; /*to have bars "left-aligned"*/ 
    position:relative; /*needed for the actual bar fill element*/ 
    margin:2px; 
} 
.graph li+li { 
    margin-left:0; /*avoid margin double-up between bars as they don't collapse*/ 
} 
.graph span { 
    position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars, 
                widths will be set inline*/ 
    background-color: #aeaeae; 
} 

cũng này cung cấp cho bạn khả năng để có được khá lạ mắt - các thanh có thể có nội dung với một thụt lề văn bản tiêu cực đối với giá trị ngữ nghĩa hoặc <span> yếu tố có thể bị bỏ rơi hoàn toàn ủng hộ của các phần tử giả.

Answer 5

Nếu bạn cung cấp cho phụ huynh position: relative, sau đó bạn có thể sử dụng position: absolute cho con div đặt chúng trong tọa độ chính xác bằng cách thiết lập left, top, right, bottom, width, height bạn một cách chính xác có thể kiểm soát các vị trí của các quán bar tại quán bar của bạn đồ thị.

.graph { 
 
    position: relative; 
 
    width: 54px; 
 
    height: 54px; 
 
    border: 1px solid blue; 
 
    background-color: lightgrey; 
 
} 
 

 
.bar { 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    background-color: yellow; 
 
}

<div class="graph"> 
 
    <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px"> 
 
    <div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div> 
 
    <div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div> 
 
    <div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div> 
 
    <div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div> 
 
    <div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div> 
 
    </div> 
 
</div> 
 

 
<p></p> 
 

 
<div class="graph"> 
 
    <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px"> 
 
    <div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div> 
 
    <div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div> 
 
    <div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div> 
 
    <div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div> 
 
    <div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div> 
 
    </div> 
 
</div>