सीएसएस बार ग्राफ - बहुत सरल

Question

मेरे पास कुछ बहुत ही बुनियादी कोड है और यह सब कुछ शीर्ष पर संरेखित करने के अलावा काम करता है ... आदर्श रूप से सलाखों को नीचे संरेखित किया जाएगा। मुझे लगता है कि मैं निश्चित स्थिति का उपयोग कर सकता हूं क्योंकि आयाम 50px पर 50px पर वर्गित होते हैं लेकिन मैं कुछ कम "निश्चित" पसंद करता हूं।

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

मैं लाइब्रेरी या जेएस एड ऑन का उपयोग नहीं करना चाहता हूं। इस हल्के वजन को रखना महत्वपूर्ण है।

इसके अलावा मैं बार को लंबवत पसंद करता हूं। किसी भी सीएसएस गुरु की रोशनी को थोड़ा सा छोड़ना मुझे लगता है कि मुझे याद आ रही है? मैं googled है और सबसे उदाहरण जटिल/परिष्कृत करने के लिए दूर हैं,

Answer 1

सबसे पहले, अपने सीएसएस को अपने एचटीएमएल से अलग करें। आप बहुत अधिक कोड दोहरा रहे हैं जब आप अपने आंतरिक divs के लिए बस कक्षा का उपयोग कर सकते हैं।

bottom: 0 तुलनात्मक रूप से स्थित div के लिए कुछ भी नहीं बदलता है।

यदि आप रिश्तेदार स्थिति का उपयोग करना चाहते हैं, तो फ्लोट और नीचे से छुटकारा पाएं और display: inline-block और vertical-align: baseline; का उपयोग करें। इसके अलावा, इस मामले में, आपको आंतरिक divs (newline) के बीच HTML में किसी भी स्थान से छुटकारा पाने की आवश्यकता है।

इस तरह (आप http://dabblet.com/gist/2779082 पर डेमो देख सकते हैं):

एचटीएमएल

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

सीएसएस

.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

position: absolute, और बदले float:left; उपयोग left: 0px;, 8px, 16px और इतने पर का उपयोग।
कंटेनर में position: relative भी जोड़ें।

Answer 3

Kolink के जवाब सही है। प्रत्येक बार div की चौड़ाई 8px है, साथ ही मार्जिन-बाएं और मार्जिन-दाएं, 8 + 1 + 1 = 10px।

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

} 

आप इस जाँच कर सकते हैं: तो मेरा सुझाव है, 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> 

सीएसएस इस तरह दिखना चाहिए बाईं मान सेट (मैं कुछ सामान्य सीएसएस नियम समूहीकृत) लिंक: उपरोक्त कोड के परिणाम देखने के लिए http://jsfiddle.net/zhujy_8833/AFbt4/।

Answer 4

मैं व्यक्तिगत रूप से प्रत्येक तत्व पर स्पष्ट रूप से xpos सेट करने से बचता हूं, चीजों को कम रखरखाव करता है। कुछ सुंदर प्रतिशत-आधारित डंप में भी अधिक उपयुक्त होगा। इस बात को ध्यान में रखते हुए, 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> 

और सीएसएस:

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

यह भी आप काफी फैंसी पाने के लिए संभावित देता है - सलाखों अर्थ मूल्य के लिए एक नकारात्मक पाठ इंडेंट के साथ सामग्री हो सकता था या <span> तत्वों पक्ष में पूरी तरह छोड़ दिया जा सकता है छद्म तत्वों का।

Answer 5

आप माता-पिता position: relative देना है, तो आप position: absolute बच्चे div के लिए उन्हें सटीक निर्देशांक में जगह left, top, right, bottom, width, height की स्थापना करके उपयोग कर सकते हैं आप ठीक अपने बार में सलाखों के स्थान को नियंत्रित कर सकते चार्ट।

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