Cột CSS, bù trừ phụ thuộc vào chiều cao

Question

Tôi đã gặp phải hành vi rất kỳ quặc về bố cục cột CSS chỉ xuất hiện trong Chrome.

Tùy thuộc vào chiều cao tổng thể của mục đang được cột bù đắp trái của nó bị dịch chuyển khiến việc xác định một vị trí thực tế là khó khăn. Kết xuất có vẻ tốt nhưng nếu bạn kiểm tra phần tử, bạn thực sự có thể thấy rằng nó được bù đắp bởi khá nhiều.

Dưới đây là một ví dụ: https://jsfiddle.net/vx8h8u46/

Kiểm tra các yếu tố .panel và bạn sẽ thấy rằng nó bounding rect không bắt đầu ở bên trái.

Nếu bạn nhấp vào nút để xóa một mục thì tất cả đột ngột đường biên giới hạn là chính xác.

Dường như điều này xảy ra khi chiều cao của bảng điều khiển vượt quá một ngưỡng nhất định nhưng nó chỉ suy đoán vào thời điểm này. Có một công việc xung quanh?

---

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

Children of cột phải inline, vì vậy đoạn mã sau nên làm việc tốt:

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

Và toàn bộ đoạn:

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

tài Border thay thế để outline trong .item Lớp

CSS tính biên giới cho phép bạn xác định kiểu và màu của đường viền của một nguyên tố.

Một phác thảo là một dòng được vẽ xung quanh các yếu tố (bên ngoài biên giới) để làm cho các phần tử "nổi bật" sở hữu phác thảo

CSS là một tài sản khó hiểu. Khi bạn lần đầu tiên tìm hiểu về điều đó, thật khó để hiểu nó thậm chí còn khác nhau như thế nào từ xa khác nhau từ thuộc tính biên giới. W3C giải thích rằng có các sự khác biệt sau đây :

1.Đường dây không chiếm không gian.

2.Mô tả có thể không phải là hình chữ nhật.

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

Sống Demo

Answer 3

sự đơn giản trong việc giải quyết các vấn đề có thể tốt hơn so với làm phức tạp nó thêm sometimes.I đề nghị giữ tất cả mọi thứ như nó và cố gắng và thêm flex. Không chỉ nó sẽ giúp bạn hiển thị trong tất cả các trình duyệt, nhưng nó sẽ sửa đổi xem theo kích thước trình duyệt trong một bootstrap như phương pháp đơn giản. Hãy thử nó và nếu nó làm cho bất kỳ phản ứng không mong muốn xin vui lòng nhận xét nó.

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