एलिमेंट <div> एलिमेंट्स अगल-बगल

Question

मुझे पता है कि यह एक सरल सवाल है, लेकिन मैं इसे मेरे जीवन के लिए समझ नहीं सकता। मेरे पास दो लिंक हैं जिन्हें मैंने एक पृष्ठभूमि छवि पर लागू किया है। यहाँ यह वर्तमान में कैसा दिखता है (छाया के लिए क्षमा याचना, एक बटन का सिर्फ एक मोटा स्केच):

हालाँकि, मैं चाहता हूं कि वे दोनों बटन साथ-साथ हों। मैं वास्तव में यह पता नहीं लगा सकता कि संरेखण के साथ क्या किया जाना चाहिए।

यहाँ HTML है

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

यहाँ सीएसएस है

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}

Comments

शीर्षक को पढ़ने से सबसे पहले जो ध्यान में आता है वह हैfloat:left;

— JCOC611

@ JCOC611: float:left;दोनों को लागू करने के लिए divयह पूरी तरह से किया था। क्या आप जवाब के रूप में अपनी टिप्पणी पोस्ट कर सकते हैं? धन्यवाद!

— सूदो rm -rf

और दूसरा है, display: inline-block;लेकिन यह कम अच्छी तरह से समर्थित है ...

— JV

फ्लोट: एक कंटेनर के अंदर छोड़ दिया काम करेगा, लेकिन मैं बटन के लिए <div> s के बजाय दो <span> टैग का उपयोग करने की कोशिश करूंगा।

— shiftycow

जैसा कि पहले ही उल्लेख किया गया है, फ्लोट को जोड़ना: बाएं; #buyButton और #galleryButton के लिए, फिर स्पष्ट के साथ एक और तत्व जोड़ें: दोनों; फ्लोटिंग साफ़ करने के लिए। <a> को लपेटने के लिए divs (ब्लॉक तत्वों) का उपयोग क्यों किया जाता है?

— ludesign

Answer 1

float:left;अपने दोनों डिवीजनों पर लागू करें उन्हें कंधे से कंधा मिलाकर खड़ा होना चाहिए।

Comments

क्या मैं गलत हूँ, या clear:both;कहीं जाने की ज़रूरत नहीं है? मैं सीएसएस सेवर कभी नहीं रहा हूं, लेकिन जब मैं साफ-सफाई देखने के लिए तैरता हूं तो मैं विशिष्ट लगता हूं।

— ब्रैड क्रिस्टी

clear:bothठीक इसके विपरीत करेंगे। "अस्थायी तत्व के बाद के तत्व इसके चारों ओर बहेंगे। इससे बचने के लिए, स्पष्ट संपत्ति का उपयोग करें।"

— JCOC611

@ JCOC611: आह, इतनी स्पष्टता आमतौर पर इस प्रकार है कि आप एक क्षणिक फ्लोट क्षमता चाहते हैं? समझ में आता है। सबक के लिए धन्यवाद। ;-)

— ब्रैड क्रिस्टी

बस "स्पष्ट," (भयानक, मुझे पता है) होने के लिए, आपको उपयोग करने की आवश्यकता होगी <br style="clear: both;" />यदि आपके पास एक तीसरा तलाक था जो आप दोनों के नीचे चाहते थे जो गठबंधन किया गया था।

— टास

@ आपको केवल इस तरह अपना तीसरा तलाक चाहिए: <div style="clear: both;">...</div>(कोई ब्रा की आवश्यकता नहीं)

— intrepidis

Answer 2

खबरदार float: left... 🤔

… तत्वों को अगल-बगल से संरेखित करने के कई तरीके हैं।

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

डेमो: कोडपेन पर सभी नीचे दिए गए उदाहरण देखें / संपादित करें

---

नीचे सभी उदाहरणों के लिए मूल शैलियाँ…

इन उदाहरणों में कुछ मूल सीएसएस शैलियों parentऔर childतत्वों के लिए :

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

---

floatसमाधान का उपयोग करने से अन्य तत्वों पर मेरा प्रभाव प्रभावित हुआ है। (संकेत: आपको एक उपसर्ग का उपयोग करने की आवश्यकता हो सकती है ।)

एचटीएमएल

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

सीएसएस

.float-left-child {
  float: left;
}

---

एचटीएमएल

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

सीएसएस

.inline-block-child {
  display: inline-block;
}

---

नोट : इन दो बाल तत्वों के बीच की जगह को div टैग के बीच के स्थान को हटाकर हटाया जा सकता है:

एचटीएमएल

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

सीएसएस

.inline-block-child {
  display: inline-block;
}

---

एचटीएमएल

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

सीएसएस

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

---

एचटीएमएल

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

सीएसएस

.inline-flex-parent {
  display: inline-flex;
}

---

एचटीएमएल

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

सीएसएस

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}

---

Comments

हाँ, लेकिन मैंने सुना है कि उपयोग inline-blockमें कुछ संगतता मुद्दे हैं। इसके अलावा, उस पर उपयोग करने के लिए कोई फायदा float?

— सूदो rm -rf

हां, inline-blockनया है, इस प्रकार आपके टारगेट ब्राउज़र अभी तक इसका समर्थन नहीं कर सकते हैं (हालांकि इसके लिए कई ब्राउज़र-विशिष्ट गुण हैं और इसके लिए वर्कअराउंड भी हैं)। लाभ यह है कि युक्त तत्व तत्वों को लपेटेंगे; साथ floatआप पेरेंट तत्व को सीएसएस जोड़ना होगा।

— ब्यू स्मिथ

Answer 3

इसे सरल रखें

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>