मेरी एकमात्र समस्या उन्हें तीन-पार रेखा बनाना और समान रिक्ति है। जाहिरा तौर पर, स्पैन में चौड़ाई और डिव नहीं हो सकते हैं (और डिस्प्ले के साथ स्पैन: ब्लॉक) क्षैतिज रूप से एक दूसरे के बगल में दिखाई नहीं देते हैं। सुझाव?
<div style='width:30%; text-align:center; float:left; clear:both;'> अब मेरे पास क्या है
जवाबों:
आप divs का उपयोग उस float: left;विशेषता के साथ कर सकते हैं जो उन्हें एक दूसरे के बगल में क्षैतिज रूप से दिखाई देगी, लेकिन फिर आपको यह सुनिश्चित करने के लिए कि वे ओवरलैप नहीं करते हैं निम्नलिखित तत्वों पर क्लियरिंग का उपयोग करने की आवश्यकता हो सकती है।
overflow: hidden। देखें: stackoverflow.com/questions/323599/…
padding-leftदाईं ओर के भाग में प्रयास करता हूं, तो इसे नजरअंदाज कर दिया जाता है।
<div style="display: in-line"></div><div style="display: in-line"></div>ठीक काम करना चाहिए।
overflow: hiddenसबसे अच्छा समाधान है।
आप उपयोग कर सकते हैं
.floatybox {
display: inline-block;
width: 123px;
}
यदि आपको केवल उन ब्राउज़र का समर्थन करने की आवश्यकता है जिनके पास इनलाइन ब्लॉक का समर्थन है। इनलाइन ब्लॉक में चौड़ाई हो सकती है, लेकिन इनलाइन हैं, बटन तत्वों की तरह।
ओह, और आप ऊर्ध्वाधर-संरेखित करने के लिए wnat कर सकते हैं: तत्वों पर शीर्ष सुनिश्चित करने के लिए कि चीजें ऊपर हैं
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
तकनीकी रूप से, एक स्पैन एक इनलाइन तत्व है, हालांकि इसमें चौड़ाई हो सकती है, आपको बस पहले ब्लॉक करने के लिए उनकी प्रदर्शन संपत्ति सेट करने की आवश्यकता है। हालाँकि, इस संदर्भ में, एक div शायद अधिक उपयुक्त है, जैसा कि मैं अनुमान लगा रहा हूं कि आप इन divs को सामग्री से भरना चाहते हैं।
एक चीज जो आप निश्चित रूप से नहीं करना चाहते हैं clear:bothवह डिव पर सेट है। इसे इस तरह सेट करने का मतलब होगा कि ब्राउज़र किसी भी तत्व को उनके समान लाइन पर बैठने की अनुमति नहीं देगा। परिणाम, आपके तत्व ढेर हो जाएंगे।
ध्यान दें, का उपयोग display:inline। यह ie6 मार्जिन-डबलिंग बग से संबंधित है। यदि आवश्यक हो तो आप अन्य तरीकों से इससे निपट सकते हैं, उदाहरण के लिए सशर्त स्टाइलशीट।
मैंने एक आवरण (#weverever) जोड़ा है क्योंकि मैं अनुमान लगा रहा हूं कि ये पृष्ठ पर केवल तत्व नहीं होंगे, इसलिए आपको निश्चित रूप से इन्हें अन्य पृष्ठ तत्वों से अलग करना होगा।
वैसे भी, मुझे आशा है कि यह उपयोगी है।
तुम कर सकते हो:
<div style="float: left;"></div>
या
<div style="display: inline;"></div>
या तो एक क्षैतिज रूप से divs टाइल का कारण होगा।
मैं इसे कुछ इस तरह से करूंगा क्योंकि यह आपको 3 समान आकार के कॉलम देता है, यहाँ तक कि रिक्ति और (भी) तराजू। नोट: यह परीक्षण नहीं किया गया है, इसलिए इसे पुराने ब्राउज़रों के लिए ट्विक करने की आवश्यकता हो सकती है।
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
मै इस्तेमाल करूंगा:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
यह पहली बार है जब मैं इस 'कोड टूल' को ओवरफ्लो से उपयोग करता हूं ... लेकिन अब तक यह काम कर रहा है ...
आप सीएसएस ग्रिड आधारित लेआउट को देखना चाहते हैं। इस लेआउट पद्धति में पृष्ठ संरचना को ग्रिड संरचना में संरेखित करने के लिए कुछ सीएसएस कक्षाओं को निर्दिष्ट करना शामिल है। यह वेब-आधारित की तुलना में प्रिंट-बेक्ड लेआउट से अधिक निकटता से संबंधित है, लेकिन यह एक ऐसी तकनीक है जिसका उपयोग बहुत सारी वेबसाइटों पर किया जाता है ताकि तालिकाओं का सहारा लिए बिना किसी संरचना में सामग्री को लेआउट किया जा सके।
मुंहतोड़ पत्रिका से शुरुआत के लिए यह प्रयास करें ।
सीएसएस फ्लोट संपत्ति को देखें। http://w3schools.com/css/pr_class_float.asp
यह div जैसे ब्लॉक तत्वों के साथ काम करता है। वैकल्पिक रूप से, आप क्या प्रदर्शित करने का प्रयास कर रहे हैं, यदि आप वास्तव में कुछ सूचनाओं की तालिका दिखाने की कोशिश कर रहे हैं, तो टेबल खराब नहीं हैं।
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
एक और ... उपयोग करने का प्रयास करें float: left;या right;, widthअन्य मानों के लिए बदलें ... यह काम का काम करता है ... यह भी ध्यान दें कि 10% जो div द्वारा उपयोग किया जाता है, वह उन्हें धोखा देता है ... बुरा अंग्रेजी के लिए खेद है :)