Столбцы CSS, нечетное смещение в зависимости от высоты

Question

Я столкнулся с очень странным поведением относительно раскладки столбцов CSS, которое появляется только в Chrome.

В зависимости от общей высоты элемента, который находится в столбце, смещение слева сдвинуто, что затрудняет определение фактического местоположения элементов. Отрисовка выглядит отлично, но если вы проверите элемент, вы можете увидеть, что он смещен довольно много.

Вот пример: 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 заменит outline в .item класса

CSS свойства границ позволяют определить стиль и цвет границы элемента.

Схема представляет собой линию, которая обращается вокруг элементов (за пределами границ), чтобы сделать элемент «выделиться»

CSS-контурный свойство является запутанным свойство. Когда вы впервые узнаете об этом , трудно понять, как он удаленно отличается от от границы. W3C объясняет это как имеющее следующие отличия:

1.Outlines не занимают место.

2.Outlines может быть непрямоугольным.

.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; 
}