अगल-बगल दो विभाग - द्रव प्रदर्शन

Question

मैं दो divs को एक साथ रखने की कोशिश कर रहा हूं और इसके लिए निम्नलिखित CSS का उपयोग कर रहा हूं।

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTML सरल है, एक रैपर div में दो बाएँ और दाएँ div है।

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

मैंने कई बार StOOverflow और अन्य साइटों पर बेहतर तरीके से खोज करने की कोशिश की है, लेकिन सटीक मदद नहीं मिल सकी।

तो, पहली नज़र में कोड ठीक काम करता है। समस्या यह है, कि जब मैं (%) में चौड़ाई बढ़ाता हूँ, तो बायाँ भाग स्वतः ही गद्दी / मार्जिन प्राप्त कर लेता है। इसलिए, 65% चौड़ाई पर, बाएं डिव में कुछ पैडिंग या मार्जिन है और दाएं डिव के साथ पूरी तरह से संरेखित नहीं है, मैंने पैडिंग / मार्जिन 0 करने की कोशिश की, लेकिन भाग्य नहीं। दूसरे, अगर मैं पृष्ठ में ज़ूम करता हूं, तो दायाँ भाग बाईं ओर नीचे स्लाइड करता है, इसकी तरह द्रव प्रदर्शन नहीं है।

नोट: मुझे खेद है, मैंने बहुत खोज की है। यह सवाल कई बार पूछा गया है, लेकिन वे जवाब मेरी मदद नहीं कर रहे हैं। मैंने बताया कि मेरे मामले में क्या समस्या है।

मुझे उम्मीद है कि इसके लिए एक तय है।

धन्यवाद।

संपादित करें: क्षमा करें, मुझे HTML समस्या, बाएँ और दाएँ दोनों पक्षों में दो "बॉक्स" div थे, उनका% में पैडिंग था, इसलिए बाईं ओर अधिक चौड़ाई के कारण अधिक पैडिंग दिखाई दी। क्षमा करें, उपरोक्त CSS सही काम करता है, इसका द्रव प्रदर्शन और नियत है, गलत प्रश्न पूछने के लिए क्षमा करें ...

Comments

दो बॉक्स डिवीजन थे? बॉक्स डिव क्या है? यह प्रश्न स्पष्ट नहीं है।

— जॉन ktejik

Answer 1

इसके बजाय इस तरह का सिस्टम आज़माएं:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

यदि आप पहले div की चौड़ाई के बराबर दूसरे पर मार्जिन-बाएँ का उपयोग करते हैं, तो आपको केवल एक div फ़्लोट करना होगा। यह कोई फर्क नहीं पड़ता कि क्या ज़ूम और उप-पिक्सेल समस्याएँ नहीं होंगी।

Comments

यह मदद नहीं कर रहा है, ज़ूमिंग चीज़ अब तय हो गई है, यह तय है, लेकिन सही div अब धीमा हो गया है और उस स्थिति में तय किया गया है

— Waleed

आपने शायद कुछ गड़बड़ कर दी है, अपने कोड की जांच करें, या मुझे jsFiddle का लिंक बताएं और इसे देखें।

— dezman

aww man, मुझे क्षमा करें। डिव्स पहले से ही मेरे ऊपर सीएसएस द्वारा तय किए गए थे जो मैंने दिए थे, इसके बस "बॉक्स" डिबों को बाईं और दाईं ओर दोनों में, पैडिंग और मार्जिन% में था, क्योंकि राइट डिव शॉर्ट शॉर्ट्स व्हाईट था, क्योंकि इसमें एन्क्वाल पैडिंग और मार्जिन था। क्षमा करें ...

— Waleed

<section>एक के <div>बजाय नहीं होना चाहिए ?

— jvriesem

Answer 2

यह एक फ्लेक्सबॉक्स के साथ आसान है:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Comments

अच्छा है, फ्लेक्सबॉक्स निश्चित रूप से जाने का रास्ता है

— जूलियन सोरो

इस साइट के अनुसार, फ्लेक्स को 94% ब्राउज़रों पर काम करना चाहिए। caniuse.com/#search=flex

— एड्रियन

@ जोस्ट्स यह उपलब्ध नहीं है कि विभिन्न ब्राउज़रों में से 94% (क्योंकि यह हमेशा क्रोम, मोज़िला, IE आदि आदि पर काम करता है), यह नहीं कि यह ब्राउज़र की परवाह किए बिना 94% समय काम करता है?

— जो

वर्तमान में यह 97 +% है। मूल रूप से, मैं कहूंगा कि यदि आपको IE8 को लक्षित करने की आवश्यकता नहीं है, तो इस मामले में फ्लेक्सबॉक्स के साथ जाएं, और अन्य। Flexbox समाधान लगभग हमेशा अधिक सुरुचिपूर्ण हैं और इसके बारे में तर्क करना आसान है।

— एलन थॉमस

यदि आपके पास एक मौजूदा वेबसाइट है, तो कभी भी ब्राउज़र शेयर द्वारा न जाएं, अपने स्वयं के ट्रैफ़िक लॉग देखें। मेरी अधिकांश साइटों पर, IE8 में केवल 0.01% ट्रैफ़िक है। हालाँकि ... मैंने ऐसी विशिष्ट साइटें देखी हैं जहाँ दर्शक निगमों, सरकार, या गैर-लाभकारी संगठनों में बहुत से विरासत सॉफ़्टवेयर का उपयोग करने वाले उपयोगकर्ता हैं, और फिर पुराने IE ब्राउज़र उपयोग आश्चर्यजनक रूप से उच्च हो सकते हैं।

— cazort

Answer 3

मेरी वर्तमान साइट के लिए इस सीएसएस का उपयोग करना। यह सही काम करता है!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

Comments

आपको सुनकर खुशी हुई और आपने खुद के जवाब को स्वीकार किया, लेकिन # फैसला क्या है? यह आपके मूल प्रश्न में नहीं है।

— जेएमडी

फ्लोट का उपयोग करना: दोनों बच्चे (# सीधे) पर छोड़ दिया गया पैरेंट डिव (#wrapper) की ऊंचाई को मार देगा। तो यह समाधान आवश्यकता पर निर्भर करता है। केवल एक बच्चे पर फ्लोट देने के लिए बेहतर। (# आपके मामले में छोड़ दिया गया)

— राहुल गांधी

Answer 4

यहाँ उन लोगों के लिए मेरा जवाब है जो Googling हैं:

सीएसएस:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

यहाँ HTML है:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

Answer 5

इस तरह दोनों डिव बना लें। यह दोनों divs को साथ-साथ संरेखित करेगा।

.my-class {
  display : inline-flex;
} 

Answer 6

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Comments

अतिप्रवाह का कारण क्या है: छिपा हुआ? यह जरूरी नहीं लगता ...

— माननीय

Answer 7

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

हालांकि मार्जिन-राइट की जरूरत नहीं है।