सीमाओं को कैसे बनाएं (एक डिव पर)?

Question

मान लीजिए कि मेरे पास मार्कअप है जैसे: http://jsfiddle.net/R8eCr/1/

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

फिर सीएसएस

.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

मेरे पास बाहरी div है display: table; border-collapse: collapse;और कोशिकाओं के साथ display: table-cellवे अभी भी क्यों नहीं गिरते हैं? मुझे यहां क्या समझ नहीं आ रहा है?

वैसे शायद एक कॉलम में कोशिकाओं की चर संख्या हो सकती है इसलिए मुझे केवल एक तरफ की सीमाएं नहीं मिल सकती हैं।

Comments

उम, आप <table>तालिकाओं के लिए मित्रों और मित्रों का उपयोग क्यों नहीं करते ?

— म्यू बहुत कम है

@ म्युइस्टोशॉर्ट, क्योंकि हो सकता है कि कोशिकाओं की एक परिवर्तनीय संख्या हो और मैं विशेष डिजाइन में खाली कोशिकाएं नहीं रखना पसंद करती हूं

— Jiew मेंग

संबंधित: stackoverflow.com/questions/5737693/…

— Ciro Santilli 郝海东 冠状 .com/ .com/ .com/ 六四

Answer 1

यहाँ एक डेमो है

पहले आपको अपने सिंटैक्स त्रुटि को ठीक करने की आवश्यकता है

display: table-cell;

नहीं diaplay: table-cell;

   .container {
    display: table;
    border-collapse:collapse
}
.column {
    display:table-row;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Comments

हम्म वास्तविक कोड में, मुझे लगता है कि यह सही है ... हम्म ... मुझे लगता है कि यह वास्तविक कोड में कुछ और होना चाहिए काम नहीं कर रहा है ... मैं यह पता लगाने की कोशिश करूँगा कि यह क्या हो सकता है

— Jiew मेंग

मैंने अपनी गलती को सही किया, मैंने आपका उत्तर दिया लेकिन मैंने फ्लोट को हटा दिया: बाईं और चौड़ाई और ऊँचाई मैं पहले से ही सीमा-सेल के बारे में जानता था

— हुशमे

@ हशमे हाँ बहुत से लोग जानते हैं लेकिन कभी-कभी थोड़ी समस्या के साथ हैंगअप, नहीं? वैसे भी, मुझे कोई समस्या नहीं है।

— भोजेंद्र रौनियार

मतदान प्रणाली मुझे प्रभावित नहीं करती है लेकिन जब कोई मेरे साथ मदद करता है तो मैं खुश हो सकता हूं।

— भोजेंद्र रौनियार

आप सीएसएस क्षमता वाले मेरे प्रोफाइल की जांच करने वाले केवल एक ही नहीं हैं, मेरे पास फ्रंट एंड डेवलपर के रूप में 7 साल का अनुभव है

— हुशमे

Answer 2

प्रदर्शन तालिका का उपयोग करने के बजाय सरल नकारात्मक मार्जिन का उपयोग करें।

Fiddle JS Fiddle में अपडेट किया गया

.container { 
    border-style: solid;
    border-color: red;
    border-width: 1px 0 0 1px;
    display: inline-block;
}
.column { 
    float: left; overflow: hidden; 
}
.cell { 
    border: 1px solid red; width: 120px; height: 20px; 
    margin:-1px 0 0 -1px;
}
.clearfix {
    clear:both;
}

Answer 3

उपयोग के बजाय borderउपयोग box-shadow:

  box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,   /* Just to fix the corner */
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;

डेमो: http://codepen.io/Hawkun/pen/rsIEp

Comments

यह वास्तव में मेरे द्वारा पाया गया सबसे अच्छा समाधान है। यह समस्या को हल करता है यदि आपका डेटा गतिशील रूप से उत्पन्न होता है और यह पूर्णता की गारंटी नहीं देता है तो आइए एक ग्रिड में 9 आइटम कहते हैं, लेकिन 2 के बजाय यदि आपके पास अन्य समाधानों के साथ यू गायब हो जाते हैं। बहुत बढ़िया !

— अनपरांग

उत्तरदायी लेआउट के लिए अच्छी चाल, प्रदर्शन संपत्ति को बदलने से बचें।

— कोसमोस

यह स्क्रीन मीडिया के लिए ठीक काम करता है। लेकिन प्रिंट मीडिया पर, बॉक्स-छाया को पृष्ठभूमि के रूप में माना जाता है और मुद्रित नहीं किया जाता है।

— Marcello Nuccio

यह मेरे लिए अच्छी तरह से काम करता है, लेकिन ध्यान दें कि उन पहले तीन छायाओं को पूरा किया जा सकता है: 1px 1px 0 1px # 888 प्रसार और ऑफसेट कोनों की देखभाल करते हैं।

— मैट शूएट

box-shadowविंडोज में उच्च कंट्रास्ट थीम का उपयोग करते समय अनदेखा (गायब) हो जाता है, इसलिए यदि आप एक्सेसिबिलिटी की परवाह करते हैं तो कृपया हमेशा एक विकल्प प्रदान करें।

— tomasz86

Answer 4

आपको अपने कॉलम के display: table-rowबजाय उपयोग करने की आवश्यकता है float: left;और स्पष्ट रूप से @Hushme अपने diaplay: table-cellको सही करेंdisplay: table-cell;

 .container {
    display: table;
    border-collapse: collapse;
}
.column {
    display: table-row;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

डेमो

Comments

यहाँ लिंक की जाँच करें जो मैं पहले से ही उपयोग कर रहा था लेकिन मैं फ्लोट को हटाना भूल गया: बाएँ jsfiddle.net/R8eCr/2 लिंक नंबर देखें

— Hushme

हाँ, यह ठीक है। बस इतना पास रहो।

— भोजेंद्र रौनियार

Answer 5

आप नकारात्मक मार्जिन का भी उपयोग कर सकते हैं:

.column {
  float: left;
  overflow: hidden;
  width: 120px;
}
.cell {
  border: 1px solid red;
  width: 120px;
  height: 20px;
  box-sizing: border-box;
}
.cell:not(:first-child) {
  margin-top: -1px;
}
.column:not(:first-child) > .cell {
  margin-left: -1px;
}

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

Comments

मैंने उसी विधि का उपयोग किया, बस साथ border-top/left: 0;। मार्जिन ऑफ़सेट बनाते हैं।

— toster-cx

@ toster-cx मुझे लगता है कि सीमाओं को ओवरलैप करने से भी बेहतर है। अच्छी सोच :-)

— मपेन

Answer 6

क्यों नहीं रूपरेखा का उपयोग करें? यह वही है जो आप रूपरेखा चाहते हैं: 1px ठोस लाल;

Comments

जवाब के साथ कुछ स्पष्टीकरण जोड़ें कि यह उत्तर वर्तमान समस्या को ठीक करने में ओपी की मदद कैसे करता है

— ρяєρ withя K

यहाँ मैं सीमा के ढहने के कई रूप दिखाता हूँ। (बूटस्ट्रैप ग्रिड का उपयोग करके): codepen.io/leonardo1024/pen/KgbNGr

— मुस्लिमबेक

Answer 7

सीमा-पतन का उपयोग करने का उदाहरण : अलग; जैसा

कंटेनर तालिका के रूप में प्रदर्शित:

ol[type="I"]>li{
  display: table;
  border-collapse: separate;
  border-spacing: 1rem;
}