HTML को बदले बिना एक ही पंक्ति में दो तत्वों को कैसे संरेखित करें

Question 1

मेरे पास एक ही लाइन पर दो तत्व हैं जो बाईं ओर तैरते हैं और दाएं तैरते हैं।

<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

दोनों के बीच पैडिंग के बारे में 10 पिक्सल के साथ तत्व 1 के बगल में लाइन करने के लिए मुझे एलिमेंट 2 की आवश्यकता है। समस्या यह है कि तत्व 2 की चौड़ाई सामग्री और ब्राउज़र (फ़ॉन्ट आकार, आदि) के आधार पर बदल सकती है, इसलिए यह हमेशा तत्व 1 के साथ पूरी तरह से पंक्तिबद्ध नहीं है (मैं बस एक मार्जिन-सही लागू नहीं कर सकता और इसे स्थानांतरित कर सकता हूं)।

मैं भी मार्कअप नहीं बदल सकता।

वहाँ उन्हें लाइन करने के लिए एक समान तरीका है? मैंने प्रतिशत के साथ मार्जिन-राइट की कोशिश की, मैंने element2 को एलिमेंट 2 को करीब लाने के लिए एक नकारात्मक मार्जिन की कोशिश की (लेकिन यह काम नहीं कर सका)।

Question 2

का उपयोग करते हुए display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;}

उदाहरण

Question 3

<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>

Question 4

#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}

फिडल: http://jsfiddle.net/sKqZJ/

या

#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}

फिडल: http://jsfiddle.net/sKqZJ/1/

या

#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}

फिडल: http://jsfiddle.net/sKqZJ/2/

या

#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}

फिडल: http://jsfiddle.net/sKqZJ/3/

संदर्भ: सीएसएस मार्जिन और पैडिंग के बीच अंतर

Question 5

प्रदर्शन का उपयोग करके : इनलाइन-ब्लॉक; और अधिक आम तौर पर जब आपके पास माता-पिता होते हैं (हमेशा html के अलावा एक माता-पिता होते हैं) display: inline-block;आंतरिक तत्वों के लिए उपयोग करते हैं। और खिड़की के सिकुड़ने (अनुबंधित) होने पर भी उन्हें एक ही पंक्ति में रहने के लिए मजबूर करना। माता-पिता के लिए दो संपत्ति जोड़ें:

    white-space: nowrap;
    overflow-x: auto;

यह स्पष्ट करने के लिए एक और स्वरूपित उदाहरण यहां दिया गया है:

.parent {
    white-space: nowrap;
    overflow-x: auto;
}

.children {
   display: inline-block;
   margin-left: 20px; 
}

इस उदाहरण के लिए, विशेष रूप से, आप उपरोक्त को साथी के रूप में लागू कर सकते हैं (मैं माता-पिता को शरीर दे रहा हूं। यदि आप सही माता-पिता को नहीं डालते हैं), तो आप html को बदलना पसंद कर सकते हैं और यदि संभव हो तो उनके लिए माता-पिता को जोड़ सकते हैं।

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
        white-space: nowrap;
        overflow-x: auto;
 }

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
   display: inline-block;
   margin-left: 10px; 
}

ध्यान रखें कि white-space: nowrap;और overlow-x: auto;वह है जो आपको उन्हें एक पंक्ति में रखने के लिए मजबूर करने की आवश्यकता है। श्वेत-स्थान: Nowrap; विकलांग लपेटना। और ओवरलो-एक्स: ऑटो; स्क्रॉलिंग को सक्रिय करने के लिए, जब तत्व फ्रेम सीमा से अधिक हो जाता है।

Question 6

ऐसे मामलों में जहां मैं फ्लोटेड तत्वों का उपयोग करता हूं, मुझे आमतौर पर यह सुनिश्चित करने की आवश्यकता होती है कि कंटेनर तत्व हमेशा फ्लोटेड तत्वों की चौड़ाई के लिए पर्याप्त बड़ा होगा और इसके अंदर सभी फिट के लिए वांछित मार्जिन। ऐसा करने का सबसे आसान तरीका स्पष्ट रूप से दोनों आंतरिक तत्वों को निश्चित चौड़ाई देना है जो बाहरी तत्व के अंदर सही तरीके से फिट होंगे:

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

यदि आप ऐसा नहीं कर सकते हैं क्योंकि यह एक स्केलिंग चौड़ाई लेआउट है, तो एक और विकल्प आयामों के प्रत्येक सेट का प्रतिशत होना है:

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}

यह मुश्किल हो जाता है जहाँ आपको कुछ इस तरह की आवश्यकता होती है:

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}

इस तरह के मामलों में, मुझे लगता है कि कभी-कभी सबसे अच्छा विकल्प फ्लोट्स का उपयोग नहीं करना है, और समान उपयोग प्राप्त करने के लिए रिश्तेदार / पूर्ण स्थिति का उपयोग करना है:

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}

हालांकि यह एक फ्लोटेड समाधान नहीं है, यह साइड कॉलम द्वारा परिणाम देता है जहां वे समान ऊंचाई हैं, और एक तरल पदार्थ के साथ रह सकता है जबकि दूसरे में एक स्थिर चौड़ाई है।

Question 7

नीचे अपना सीएसएस बदलें

#element1 {float:left;margin-right:10px;} 
#element2 {float:left;}

यहाँ JSFiddle http://jsfiddle.net/a4aME/ है

Question 8

यह वही है जो मैंने आपके लिए इसी तरह के उपयोग के मामले के लिए उपयोग किया था।

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

अपनी आवश्यकता के अनुसार अपनी चौड़ाई और पैडिंग को समायोजित करें। नोट - 'पेडिंग ’को जोड़ने के लिए' चौड़ाई’ को 100% से अधिक नहीं (एल 1_ एक्सपोज़र + एल 2_ एक्सपोज़र) से अधिक रखें, इसे 100% से कम रखें।