लंबवत संरेखित करें मैं विभिन्न फ़ॉन्ट आकारों के साथ दो divs तैरने की कोशिश कर रहा हूँ। मुझे समान आधार रेखा पर पाठ को संरेखित करने का कोई तरीका नहीं मिल रहा है। आप HTML में बाईं जारी div से पहले जारी div सही रख दिया और वे खड़ी लाइन अप करेंगे, तोलंबवत divs
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>
: यहाँ मैं क्या कोशिश कर रहे हैं है।
वैकल्पिक रूप से, आप दोनों divs बाईं ओर तैर सकते हैं - यह पूरी तरह से मान्य है - और कैसे अधिकांश सीएसएस डिज़ाइन कोड किए जाते हैं।
ठीक है, सबसे पहले शुद्ध सीएसएस तरीका। आप नीचे इस तरह relative+absolute positioning का उपयोग करने के लंबवत संरेखण प्राप्त कर सकते हैं:
<div id="header">
<div id="left">BIG</div>
<div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>
आप इस के साथ कुछ मुद्दों हो सकता है, IE6 व्यवहार के साथ ही मेनू जैसी चीजों के साथ z- सूचकांक मुद्दों (पिछली बार की तरह मैं यह मेरी मेनू की कोशिश की पूर्ण सामग्री के तहत दिखाई दिया)।
इसके अलावा, इस पर निर्भर करता है कि सभी तत्वों को पूरी तरह से तैनात करने की आवश्यकता है या नहीं, आपको चीजों को स्पष्ट रूप से युक्त तत्व की ऊंचाई निर्दिष्ट करने की आवश्यकता हो सकती है, जो आमतौर पर अवांछनीय है। आदर्श रूप से, आप चाहते हैं कि कंटेनर अपने बच्चों के लिए ऑटो-साइज करे।
समस्या यह है कि विभिन्न आकार के फोंट की बेसलाइनें मेल नहीं खातीं और मुझे ऐसा करने का "शुद्ध" सीएसएस तरीका नहीं पता है।
टेबल समाधान तुच्छ है, लेकिन साथ:
<table id="header">
<tr>
<td id="left">BIG</td>
<td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>
यह कोशिश करो और आप इसे पूरी तरह से काम करता है देखेंगे।
एंटी-टेबल भीड़ नीली हत्या की चिल्लाती है लेकिन उपरोक्त यह सबसे आसान, सबसे ब्राउज़र-अनुकूल तरीका है (विशेष रूप से यदि आई 6 समर्थन आवश्यक है)।
ओह और हमेशा सीएसएस शैलियों को इनलाइन करने के लिए कक्षाओं का उपयोग करना पसंद करते हैं।
अधिकतर डितो। मैं टेबल पर रिसॉर्ट की तुलना में कंटेनर पर ऊंचाई को परिभाषित करना पसंद करता हूं, लेकिन मैं ज्यादातर वेब ऐप विकास करता हूं जहां पूरे बदबूदार लेआउट पूरी तरह से पहले से ही स्थित है। मैं आईई 6 के साथ संघर्ष करने की उम्मीद नहीं करता जब तक कि अन्य बकवास का गुच्छा नहीं हो जाता है :) –
यदि आप टेक्स्ट बेसलाइन पर संरेखित करना चाहते हैं, तो मैं नहीं देख सकता कि आप टेबल का उपयोग करने के बजाय इसे और कैसे कर सकते हैं। एक div के भीतर चीजें मूल रूप से एक-दूसरे से स्वतंत्र होती हैं, और स्पैन को गड़बड़ नहीं किया जा सकता है। तालिकाओं का उपयोग करना जब गलत चीजें गलत होती हैं, तो सही चीजें होने पर तालिकाओं का उपयोग करना सही होता है। उनका उपयोग करना जब वे एकमात्र चीज हैं जो काम करती है, हालांकि, मेरी पुस्तक में पूरी तरह से स्वीकार्य है। – ijw
मैं "लंबवत-संरेखण: नीचे" – asdfasdfads
क्या आपका मतलब टाइपोग्राफ़िक अर्थ में आधारभूत है? (यानी, पाठ की प्रत्येक पंक्ति दूसरे कॉलम में एक समान रेखा के साथ स्तर है) यदि ऐसा है, तो फ़ॉन्ट आकारों को एक दूसरे के गुणक होने की आवश्यकता है - उदाहरण के लिए, 12 और 18 पीएक्स (1: 1.5)।
यदि आपका मतलब है कि divs को एक ही ऊंचाई की आवश्यकता है, तो ऐसा करने का कोई आसान तरीका नहीं है। आप मैन्युअल रूप से ऊंचाई (ऊंचाई: 100px;) सेट कर सकते हैं, या अन्य परिवर्तनों के रूप में समायोजित करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।
या, आप एक कंटेनर में दो divs को संलग्न करके उसी ऊंचाई को नकली कर सकते हैं, और उसके बाद कॉलम के रूप में पृष्ठभूमि शैली को लागू कर सकते हैं जो कॉलम के रूप की नकल करता है, इसे लंबवत रूप से दोहराने के लिए सेट करता है। इस तरह, आपको गलत कॉलम मिलते हैं। गहराई से देखने के लिए, यह classic A List Apart article देखें।
क्या आपका मतलब है, आपके पास टेक्स्ट के दो टुकड़े हैं, और दोनों को कॉलम के नीचे होना चाहिए? (क्षमा करें, अभी तक कोई छवि पोस्ट नहीं कर सकते हैं)
एक तरीका यह है कि आप यह कर सकते हैं ऊपर दिए गए गलत कॉलम विधि का उपयोग कर रहा है।
दूसरा तरीका टेक्स्ट के अंदर अपने कंटेनर में टेक्स्ट सेट करना है। फिर, कॉलम के नीचे बिल्कुल दोनों स्थित करें ...यहाँ एक लंबे टुकड़ा है:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
.col { width:200px; float:left; }
.short { height:200px; background:#eee; margin-bottom:20px; }
.long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */ }
#container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}
#big, #small { position:absolute; bottom:0px; width:200px; }
#big { height:100px; background:red; }
#small { height:20px; background:green; right:0px; }
</style>
</head>
<body>
<div id="container">
<div class="col long">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</div>
<div id="big" >BIG</div>
<div id="small">small</div>
</div>
</body>
</html>
पसंद करूंगा, मुझे नहीं पता कि आप क्या कहना चाहते हैं, लेकिन 18 12 का पूर्णांक नहीं है और इसके विपरीत, * कुछ भी * 1212 का एक गैर-पूर्णांक एकाधिक है। – ijw
कुछ गंभीरता से इस टिप्पणी के साथ necromancy, लेकिन मुझे लगता है कि उसका मतलब क्या था कि उन्हें एक आम कारक साझा करने की आवश्यकता है, जो इस मामले में 6. – Isochronous
संपादित सिर्फ सवाल फिर से पढ़ें और देखा एक बॉक्स सही करने के लिए चल जरूरत है ... इसलिए नीचे काम नहीं करता है ... लेकिन अनुकूलनीय हो सकता है
सबसे पहले, आपको divs की बजाय स्पैन का उपयोग करना चाहिए क्योंकि सामग्री को समाप्त करने के लिए इनलाइन होने जा रहा है। मैं इनके अंदर और बहिष्कार क्यों नहीं जानता, लेकिन इसका मतलब है कि आपके तत्व ब्राउज़र में थोड़ा सा मित्रवत व्यवहार करेंगे।
एक बार जब आप किया है कि, यह एक इलाज काम करता है, IE6 में भी और 7:
#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}
<div id="header">
<span id="left">BIG</span>
<span id="right">SMALL</span>
</div>
+1 होगा, धन्यवाद - बस मेरे फ्लोटेड पैरा को इनलाइन ब्लॉक स्पैन में बदल दिया है, और यह करता है वास्तव में काम करते हैं! – halfer
आप इस का उपयोग कर line-height कर सकते हैं लेकिन यह केवल इनलाइन तत्वों पर काम करता है और अगर पाठ नहीं है लपेट दें।
<div id="header" style="overflow:hidden;">
<span id="left" style="font-size:40px;">BIG</span>
<span id="right" style="line-height:48px;">SMALL</span>
</div>
मैं span करने के लिए div बदल दिया है। यदि आप div रखना चाहते हैं तो बस अपनी शैली में display:inline जोड़ें।
<div id="header" style="overflow:hidden;">
<div id="left" style="font-size:40px;display:inline;">BIG</div>
<div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>
इससे उन्हें बेसलाइन पर मिलान करने में मदद नहीं मिलती है, जो सवाल है (मैंने वही गलती की है जब तक मैं इसे दोबारा पढ़ता हूं)। – cletus
मैंने भी वही बात सोचा! –