दो इनलाइन-ब्लॉक तत्व, प्रत्येक 50% चौड़े, एक पंक्ति में कंधे से कंधा मिलाकर फिट नहीं होते हैं

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

उपरोक्त कोड एक पंक्ति में #left div और #right div, अगल-बगल रखने की कोशिश कर रहा है। लेकिन जैसा कि आप उपरोक्त JSFiddle URL में देख सकते हैं, ऐसा नहीं है।

मैं डिव में से किसी एक की चौड़ाई को 49% तक कम करने के मुद्दे को हल करने में सक्षम हूं। Http://jsfiddle.net/mUKSC/ देखें । लेकिन यह एक आदर्श समाधान नहीं है क्योंकि दो विभाजनों के बीच एक छोटा अंतर दिखाई देता है।

एक और तरीका है कि मैं समस्या को हल करने में सक्षम हूं, दोनों डिवीजनों को फ्लोट करके। Http://jsfiddle.net/VptQm/ देखें । यह ठीक काम करता है।

लेकिन मेरा मूल प्रश्न बना हुआ है। क्यों जब दोनों डिवीजनों को इनलाइन-ब्लॉक तत्वों के रूप में रखा जाता है, तो वे कंधे से कंधा मिलाकर फिट नहीं होते हैं?

Question 2

inline-blockतत्वों का उपयोग करते समय, whitespace उन तत्वों के बीच हमेशा एक समस्या होगी (यह स्थान लगभग ~ 4px चौड़ा है)।

तो, आपके दोनों divs, जिसमें दोनों की 50% चौड़ाई है, प्लस whitespace(~ 4px) चौड़ाई में 100% से अधिक है, और इसलिए यह टूट जाता है। आपकी समस्या का उदाहरण:

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

स्निपेट का विस्तार करें

इसे ठीक करने के कुछ तरीके हैं:

1. उन तत्वों के बीच कोई स्थान नहीं

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

स्निपेट का विस्तार करें

2. HTML टिप्पणियों का उपयोग करना

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

स्निपेट का विस्तार करें

3. माता-पिता font-sizeको सेट करें 0, और फिर inline-blockतत्वों में कुछ मूल्य जोड़ दें

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

स्निपेट का विस्तार करें

4. उनके बीच एक नकारात्मक मार्जिन का उपयोग करना ( बेहतर नहीं )

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

स्निपेट का विस्तार करें

5. समापन कोण छोड़ने

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

स्निपेट का विस्तार करें

6. कुछ HTML समापन टैगों को छोड़ना ( संदर्भ के लिए @thirtydot )

कोड स्निपेट दिखाएं

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

स्निपेट का विस्तार करें

संदर्भ:

जैसा कि @ MarcosPérezGude ने कहा , सबसे अच्छा तरीका उपयोग करना है rem, और टैग font-sizeपर कुछ डिफ़ॉल्ट मान जोड़ें html(जैसे HTML5Boilerplate )। उदाहरण:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

अपडेट : जैसा कि यह लगभग 2018 है। फ्लेक्सबॉक्स या उससे भी बेहतर - सीएसएस ग्रिड लेआउट का उपयोग करें ।

Question 3

css3 में अच्छा उत्तर है:

white-space: nowrap;

मूल नोड में, और:

white-space: normal;
vertical-align: top;

50% पर तलाक (या अन्य) में

उदाहरण: http://jsfiddle.net/YpTMh/19/

संपादित करें:

इसके साथ एक और तरीका है:

font-size: 0;

माता-पिता नोड के लिए और बच्चे के नोड में इसे ओवरराइड करें

Question 4

ऐसा इसलिए है क्योंकि आपके दो विभाजनों के बीच व्हॉट्सएप की व्याख्या एक अंतरिक्ष के रूप में की जा रही है। यदि आपने अपने <div>टैग्स को लाइन में रखा है जैसा कि समस्या के नीचे दिखाया गया है :

<div id="left"></div><div id="right"></div>

Question 5

क्योंकि तत्वों के बीच एक स्थान है। यदि आप सभी व्हाट्सएप को हटा देते हैं, तो वे फिट होंगे ।

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

Question 6

इनलाइन-ब्लॉक के बजाय या तो उन्हें ब्लॉक करें। यह उनके बीच अंतरिक्ष की अनदेखी divs प्रदान करेगा।

display:block;

या टैग के बीच की जगह को हटा दें

<div id='left'></div><div id='right'></div>

या जोड़ें

margin: -1en;

डिव में से एक के लिए अंतरिक्ष को कम करने के लिए सिंगल स्पेस द्वारा प्रदान किया गया।

Question 7

कृपया नीचे दिए गए कोड की जाँच करें:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

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

स्निपेट का विस्तार करें

Question 8

फ्लेक्सबॉक्स उदाहरण - इसका उपयोग पैरेंट क्लास द्वारा साइड तत्वों द्वारा दो पक्ष रखने के लिए किया जाएगा।

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

ऊर्ध्वाधर रूप से एक div को दूसरे div के अंदर केंद्रित करने से लिया गया

Question 9

यह css डिस्प्ले को जोड़कर किया जा सकता है: इनलाइन तत्वों को रखने वाले div को इनलाइन।

एक नकारात्मक मान के साथ मार्जिन का उपयोग करके सफेद स्थान को हटाते समय इसे इस विशेष तत्व में जोड़ना आवश्यक हो जाता है। इसे कक्षा में जोड़ने से उन स्थानों पर प्रभाव पड़ेगा जहाँ इस वर्ग का उपयोग किया गया है।

तो यह प्रदर्शन का उपयोग करने के लिए सुरक्षित होगा: इनलाइन;

Question 10

फ्लोट जोड़ें : बाएं; दोनों div टैग के लिए।

div {
  float: left;
}

स्निपेट का विस्तार करें