उदाहरण के लिए, मैं नीचे दी गई छवि में एक टेम्पलेट बनाना चाहता हूं।div को किसी अन्य div के अंदर पूर्ण स्थिति में कैसे रखा जाए?
कैसे आप अपने पूर्ण स्थिति के लिए कंटेनर के अंदर प्रत्येक div स्थिति करते हैं? मैं फ्लोट-एट्रिब्यूट्स का उपयोग करने की आवश्यकता के बिना पसंद करूंगा। किसी भी छोटे उदाहरण की सराहना की जाएगी।
आप absolute और relative स्थिति का उपयोग कर सकते लेकर असमंजस में हैं।
एचटीएमएल
<div id="container" class="box">
<div class="box top left"></div>
<div class="box top center"></div>
<div class="box top right"></div>
<div class="box middle left"></div>
<div class="box middle center"></div>
<div class="box middle right"></div>
<div class="box bottom left"></div>
<div class="box bottom center"></div>
<div class="box bottom right"></div>
</div>
सीएसएस
#container{
width:200px;
height:200px;
position:relative;
border:1px solid black;
}
.box{
border:1px solid red;
position:absolute;
width:20px;
height:20px;
}
.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}
.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}
डेमोhttp://jsfiddle.net/gaby/MB4Fd/1/
पर 10(बिल्कुल आप वास्तविक स्थिति आप पसंद के, ऊपर/छोड़ दिया/सही/नीचे बदलकर समायोजित कर सकते हैं महत्व देता)
कंटेनर पर position: relative; का उपयोग करें (<div> सभी सामग्री युक्त) और बिल्कुल बच्चे तत्वों को स्थिति दें। कंटेनर के अंदर के बच्चे तत्व कंटेनर के सापेक्ष तैनात किए जाएंगे, इसलिए आपकी आवश्यकताओं को पूरा करने के लिए यह बहुत आसान होगा।
हालांकि, यह आपकी साइट को बाहर रखने के लिए अधिकांश परिस्थितियों में स्थिति का उपयोग करने के लिए खराब अभ्यास माना जाता है .. मैं फ्लोट का उपयोग करने का सुझाव देता हूं, भले ही आप दावा नहीं करना चाहते हैं, तो आप अलग-अलग ब्राउज़रों में अधिक स्थिरता प्राप्त करेंगे ।
this लेख पढ़ें अगर आप तैरता
तुम्हारा मतलब है: आप एचटीएमएल के बारे में कुछ भी नहीं पता है और किसी और आप के लिए एक एचटीएमएल टेम्पलेट क्या करना चाहते हैं ? –
आप मेरे दोस्त को गलत कर रहे हैं, यह सीएसएस है :) अगली बार अधिक दोस्ताना होने का प्रयास करें, इससे आपको कोई भी बाधा नहीं है। – Stybos