सीएसएस कॉलम, ऊंचाई

Question

के आधार पर अजीब ऑफ़सेट मैंने सीएसएस कॉलम लेआउट के संबंध में एक बहुत ही अजीब व्यवहार में भाग लिया है जो केवल क्रोम में दिखाई देता है।

आइटम की कुल ऊंचाई के आधार पर स्तंभित किया गया है, इसके बाएं ऑफसेट को स्थानांतरित किया गया है जिससे वास्तविक स्थान को निर्धारित करना मुश्किल हो जाता है। प्रतिपादन ठीक दिखता है लेकिन यदि आप तत्व का निरीक्षण करते हैं तो आप वास्तव में देख सकते हैं कि यह काफी हद तक ऑफसेट है।

यहाँ एक उदाहरण है: https://jsfiddle.net/vx8h8u46/

.panel तत्व का निरीक्षण करें और आप देखेंगे कि यह रेक्ट बाउंडिंग है कि बाईं ओर शुरू नहीं करता है।

यदि आप एक आइटम को निकालने के लिए बटन पर क्लिक करते हैं तो अचानक बाउंडिंग रेक्ट सही होता है।

ऐसा लगता है कि यह जब पैनल की ऊंचाई एक निश्चित सीमा से अधिक हो जाती है लेकिन यह केवल इस बिंदु पर अटकलें है होता है। क्या आसपास कोई काम है?

---

function logOffset() { 
 
    document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left; 
 
} 
 

 
window.removeLastItem = function() { 
 
    var items = document.querySelectorAll(".item"); 
 
    if (items.length) { 
 
    items[items.length - 1].remove(); 
 
    logOffset(); 
 
    } 
 
} 
 

 
logOffset();

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 160px; 
 
    height: 80px; 
 
    outline: 1px solid red; 
 
} 
 

 
.container { 
 
    -moz-column-width: 320px; 
 
    column-width: 320px; 
 
    -moz-column-fill: auto; 
 
    column-fill: auto; 
 
    max-height: 160px; 
 
    width: 640px; 
 
}

<div class="container"> 
 
    <div class="panel"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 

 
    <!-- Something weird happens after this --> 
 
    <div class="item">10</div> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    Left offset of 
 
    <mark>panel</mark>: 
 
    <span id="log"></span> 
 
</div> 
 

 
<button onclick="removeLastItem()"> 
 
    Remove last item 
 
</button>

Answer 1

कॉलम के बच्चे इनलाइन होना चाहिए, तो निम्न कोड में अच्छी तरह से काम करना चाहिए:

.panel { 
    display: inline; /* Children of columns must be inline */ 
} 

और पूरा स्निपेट:

function logOffset() { 
 
    document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left; 
 
} 
 

 
window.removeLastItem = function() { 
 
    var items = document.querySelectorAll(".item"); 
 
    if (items.length) { 
 
    items[items.length - 1].remove(); 
 
    logOffset(); 
 
    } 
 
} 
 

 
logOffset();

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 160px; 
 
    height: 80px; 
 
    outline: 1px solid red; 
 
} 
 

 
.container { 
 
    column-width: 320px; 
 
    column-fill: auto; 
 
    max-height: 160px; 
 
    width: 640px; 
 
} 
 

 
.panel { 
 
    display: inline; /* Children of columns must be inline */ 
 
}

<div class="container"> 
 
    <div class="panel"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 

 
    <!-- Something weird happens after this --> 
 
    <div class="item">10</div> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    Left offset of 
 
    <mark>panel</mark>: 
 
    <span id="log"></span> 
 
</div> 
 

 
<button onclick="removeLastItem()"> 
 
    Remove last item 
 
</button>

function logOffset() { 
 
    document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left; 
 
} 
 

 
window.removeLastItem = function() { 
 
    var items = document.querySelectorAll(".item"); 
 
    if (items.length) { 
 
    items[items.length - 1].remove(); 
 
    logOffset(); 
 
    } 
 
} 
 

 
logOffset();

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 160px; 
 
    height: 80px; 
 
    outline: 1px solid red; 
 
} 
 

 
.container { 
 
    -moz-column-width: 320px; 
 
    column-width: 320px; 
 
    -moz-column-fill: auto; 
 
    column-fill: auto; 
 
    max-height: 160px; 
 
    width: 640px; 
 
}

<div class="container"> 
 
    <div class="panel"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 

 
    <!-- Something weird happens after this --> 
 
    <div class="item">10</div> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    Left offset of 
 
    <mark>panel</mark>: 
 
    <span id="log"></span> 
 
</div> 
 

 
<button onclick="removeLastItem()"> 
 
    Remove last item 
 
</button>

Answer 2

उपयोगकर्ता Border.item कक्षा

सीएसएस सीमा गुण आप शैली और एक तत्व के बॉर्डर का रंग निर्दिष्ट कर सकते हैं में outline को बदलें।

एक रूपरेखा "बाहर खड़े"

सीएसएस रूपरेखा संपत्ति एक भ्रामक संपत्ति है एक लाइन है कि (सीमाओं के बाहर) तत्वों के आसपास तैयार की है तत्व बनाना है। जब आप पहली बार इसके बारे में सीखते हैं, तो यह समझना मुश्किल है कि यह सीमा संपत्ति से को दूरस्थ रूप से अलग कैसे करता है। डब्ल्यू 3 सी ने इसे निम्नलिखित अंतर के रूप में समझाया है:

1. ऑटलाइन स्थान नहीं लेते हैं।

2. ऑटलाइन गैर-आयताकार हो सकता है।

.item { 
    display: inline-block; 
    width: 160px; 
    height: 80px; 
    border: 1px solid red; 
} 

समस्या को हल करने में लाइव Demo

Answer 3

सादगी इसे और अधिक sometimes.I यह है के रूप में सब कुछ रखने और कोशिश करते हैं और फ्लेक्स जोड़ने का सुझाव देते हैं उलझी की तुलना में बेहतर हो सकता है। न केवल यह आपको सभी ब्राउज़रों में प्रदर्शित करने में मदद करेगा, लेकिन यह सरल विधि जैसे बूटस्ट्रैप में ब्राउज़र आकार के अनुसार दृश्य को संशोधित करेगा। इसे आज़माएं और यदि यह कोई अवांछित प्रतिक्रिया देता है तो कृपया टिप्पणी करें।

.classname { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content:center; 
}