का उपयोग कर ऊपरी दाएं, या "बॉक्स" के निचले दाएं कोने में टेक्स्ट को कैसे रखा जाए, मुझे here और and here को दाईं ओर होने के लिए, लोरेम ipsums के समान ही कैसे मिलेगा? निम्नलिखित देखें:सीएसएस
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
<div style="position: relative; width: 250px;">
<div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
here
</div>
<div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
and here
</div>
Lorem Ipsum etc <br />
blah <br />
blah blah <br />
blah <br />
lorem ipsums
</div>, तो आप बहुत करीब हो जाता है।
पहली पंक्ति 3 <div> रों शामिल होंगे। एक बाहरी जिसमें दो आंतरिक <div> एस शामिल हैं। पहले आंतरिक <div> में float:left होगा जो सुनिश्चित करेगा कि यह बाईं ओर रहता है, दूसरे में float:right होगा, जो इसे दाईं ओर चिपकेगा।
<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>
... स्पष्ट रूप से इनलाइन-स्टाइल सबसे अच्छा विचार नहीं है - लेकिन आपको बिंदु मिल गया है।
2,3, और 4 एकल <div> एस होगा।
5 काम 1. तरह
आप एक <div> या style="float: right" साथ <span> में "यहां" डाल करने के लिए की आवश्यकता होगी।
आप पूर्ण स्थिति का उपयोग करने में सक्षम हो सकते हैं।
कंटेनर बॉक्स position: relative पर सेट किया जाना चाहिए।
शीर्ष-दाएं पाठ को position: absolute; top: 0; right: 0 पर सेट किया जाना चाहिए। नीचे-दाएं पाठ को position: absolute; bottom: 0; right: 0 पर सेट किया जाना चाहिए।
आपको पूर्ण स्थान वाले तत्वों के नीचे चलने से बॉक्स की मुख्य सामग्री को रोकने के लिए padding के साथ प्रयोग करने की आवश्यकता होगी, क्योंकि वे टेक्स्ट सामग्री के सामान्य प्रवाह के बाहर मौजूद हैं। यद्यपि आप "टॉप" और "नीचे" मूल्यों tweak करना पड़ सकता है
<style>
#content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
.topright { position: absolute; top: 5px; right: 5px; text-align: right; }
.bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id="content">
<div class="topright">here</div>
<div class="bottomright">and here</div>
Lorem ipsum etc................
</div>
यदि लोरम इप्सम युक्त तत्व की स्थिति पूर्ण सेट है, तो आप सीएसएस के माध्यम से स्थिति निर्दिष्ट कर सकते हैं। "यहां" और "और यहां" तत्वों को ब्लॉक स्तर तत्व में निहित करने की आवश्यकता होगी। मैं इस तरह मार्कअप का उपयोग करूंगा।
print("<div id="lipsum">");
print("<div id="here">");
print(" here");
print("</div>");
print("<div id="andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");
ऊपर के लिए सीएसएस यहां है।
#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}
फिर से, उपरोक्त केवल काम करता है (भरोसेमंद) यदि #lipsum पूर्ण के माध्यम से स्थित है।
यदि नहीं, तो आपको फ्लोट संपत्ति का उपयोग करने की आवश्यकता होगी।
#here, #andhere {float:right;}
आपको उचित स्थान पर अपना मार्कअप भी रखना होगा। बेहतर प्रस्तुति के लिए, आपके दो divs को शायद कुछ पैडिंग और मार्जिन की आवश्यकता होगी ताकि टेक्स्ट एक साथ नहीं चल सके।
या इससे भी बेहतर, आपकी आवश्यकता के अनुसार HTML तत्वों का उपयोग करें। यह क्लीनर है, और दुबला मार्कअप पैदा करता है।उदाहरण:
<dl>
<dt>Lorem Ipsum etc <em>here</em></dt>
<dd>blah</dd>
<dd>blah blah</dd>
<dd>blah</dd>
<dt>lorem ipsums <em>and here</em></dt>
</dl>
सही करने के लिए em (display: block के साथ) फ्लोट, या position: absolute के लिए सेट position: relative के रूप में अपनी माता पिता के साथ।
दाईं ओर उस पाठ को फ़्लोट करें जिसे आप दाईं ओर दिखाना चाहते हैं, और मार्कअप में यह सुनिश्चित करें कि यह टेक्स्ट और उसके आस-पास की अवधि बाईं ओर होने वाले पाठ से पहले होती है। यदि यह पहले नहीं होता है, तो आपको एक अलग पंक्ति पर चलने वाले फ़्लोट किए गए टेक्स्ट के साथ समस्या हो सकती है।
<html>
<body>
<div>
<span style="float:right">here</span>Lorem Ipsum etc<br/>
blah<br/>
blah blah<br/>
blah<br/>
<span style="float:right">and here</span>lorem ipsums<br/>
</div>
</body>
</html>
ध्यान दें कि यह किसी भी पंक्ति के लिए काम करता है, न केवल शीर्ष और निचले कोनों में।
आपको केवल दाईं ओर div तत्व को फ़्लोट करने और इसे मार्जिन देने की आवश्यकता है। सुनिश्चित करें कि इस मामले के लिए "पूर्ण" का उपयोग न करें।
#date {
margin-right:5px;
position:relative;
float:right;
}
लेकिन "और यहाँ" अंतिम "blah" –
जो ब्राउज़र के रूप में एक ही पंक्ति के बजाय, एक नई लाइन पर दिखाई देता है? यह प्रमुख तीनों में मेरे लिए ठीक काम करता है, जब तक कि आपके पास पहले फ़्लोट किए गए टेक्स्ट हों। पूर्ण स्थिति निश्चित रूप से काम करेगी यदि आप केवल बॉक्स के कोनों की परवाह करते हैं, लेकिन यह आपको दाईं ओर मनमाने ढंग से लाइनों पर पाठ को फ़्लोट करने की अनुमति देता है। – phloopy