divs के बीच का स्थान - डिस्प्ले टेबल-सेल

Question

मेरे यहाँ दो विभाग हैं:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

क्या इन दोनों डिवो (जो है display:table-cell) के बीच जगह बनाने का एक तरीका है ?

Answer 1

आप border-spacingसंपत्ति का उपयोग कर सकते हैं:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

सीएसएस:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin डेमो

कोई अन्य विकल्प?

खैर , वास्तव में नहीं।

क्यों?

• marginसंपत्ति लागू नहीं है करने के लिए display: table-cellतत्वों।
• padding संपत्ति कोशिकाओं के किनारों के बीच जगह नहीं बनाती है।
• floatसंपत्ति उन table-cellतत्वों के अपेक्षित व्यवहार को नष्ट कर देती है जो उनके मूल तत्व के समान लंबे होने में सक्षम हैं।

Comments

कोई अन्य विकल्प? बेशक, position: relative।

— जोंगोसी

@Jongosi के अनुसार कल्पना : के प्रभाव position: relativeपर table-*-group, table-row, table-column, table-cell, और table-captionतत्वों अपरिभाषित है।

— हाशम क़ोलमी

आप पृष्ठभूमि के समान एक-तरफा सीमा भी बना सकते हैं। border-right: 10px solid #FFF। जब मैंने table-cellतत्वों के बीच कुछ स्थान चाहा तो सीएसएस ड्रॉपडाउन मेनू को डिजाइन करते समय मेरे लिए यह अच्छा रहा ।

— आर्मडैड्राइव

आप रिक्ति के लिए विशुद्ध रूप से कोशिकाओं को भी जोड़ सकते हैं। आदर्श नहीं है, लेकिन कम से कम आप सबसे सही सेल पर सीमा-रिक्ति को बंद करने की कोशिश करने के सिरदर्द से बचते हैं।

— डैनियल

मैं यह भी चाहता था कि "पैडिंग" "सेल" के केवल 1 किनारे पर हो, इसलिए मुझे पारदर्शी बॉर्डर के लिए rgba (0,0,0,0) के बॉर्डर कलर का उपयोग करने के अलावा आर्मड्राड्राइव के घोल का उपयोग करना था। पृष्ठभूमि रंग / छवि के बारे में चिंता करने की ज़रूरत नहीं है। बॉर्डर-राइट: 10px ठोस आरजीबीए (0,0,0,0);

— JAX

Answer 2

यदि संभव हो तो पारदर्शी सीमाओं का उपयोग करें।

JSFiddle डेमो

https://jsfiddle.net/74q3na62/

एचटीएमएल

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

सीएसएस

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

व्याख्या

आप border-spacingसंपत्ति का उपयोग कर सकते हैं, जैसा कि स्वीकार किए गए उत्तर से पता चलता है, लेकिन यह न केवल तालिका कोशिकाओं के बीच बल्कि टेबल कोशिकाओं और टेबल कंटेनर के बीच जगह भी उत्पन्न करता है। यह अवांछित हो सकता है।

यदि आपको अपनी टेबल कोशिकाओं पर दृश्यमान सीमाओं की आवश्यकता नहीं है, तो आपको transparentसेल मार्जिन उत्पन्न करने के लिए सीमाओं का उपयोग करना चाहिए । पारदर्शी सीमाओं को स्थापित करने की आवश्यकता होती है background-clip: padding-box;क्योंकि अन्यथा सीमा पर तालिका कोशिकाओं की पृष्ठभूमि का रंग प्रदर्शित होता है।

IE9 ऊपर (और सभी अन्य आधुनिक ब्राउज़रों) में पारदर्शी सीमाओं और पृष्ठभूमि-क्लिप का समर्थन किया जाता है। यदि आपको IE8 संगतता की आवश्यकता है या वास्तविक पारदर्शी स्थान की आवश्यकता नहीं है, तो आप बस एक सफेद सीमा रंग सेट कर सकते हैं और background-clipबाहर छोड़ सकते हैं।

Comments

'बॉर्डर-राइट' सेटिंग वास्तव में पर्याप्त जगह प्रदान करने के लिए पर्याप्त है, कोई "तालिका" घोषित करने की आवश्यकता नहीं है।

— फोर्सबर्ग

Answer 3

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

Answer 4

ठीक है, ऊपर काम करता है, यहां मेरा समाधान है जिसे थोड़ा कम मार्कअप की आवश्यकता है और अधिक लचीला है।

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}

<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

Answer 5

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

आप जो भी चौड़ाई आवश्यक है, उसे जोड़ सकते हैं। मैंने सिर्फ 0.6% का उपयोग किया, क्योंकि जब मुझे ऐसा करना था, तो मुझे इसकी आवश्यकता थी।

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>

Comments

यह एक भयानक समाधान है।

यह एक सामान्य रणनीति थी जब वास्तविक टेबल तत्वों का उपयोग लेआउट उद्देश्यों के लिए किया गया था, और इस कारण से कि कार्यप्रणाली अब अप्रचलित है।

— राकितिन

के रूप में यह केवल सीएसएस के साथ पूरा किया जा सकता है, HTML उपयोग से बचना चाहिए

— टोनी मिशेल Caubet