CSS列，奇数偏移取决于高度

Question

我遇到了一个关于CSS列布局的非常奇怪的行为，它只出现在Chrome中。

根据被列入项目的整体高度，其左偏移量会发生偏移，这使得很难确定项目的实际位置。渲染看起来很好但是如果你检查元素，你实际上可以看到它被相当多的偏移。

以下是一个例子：https://jsfiddle.net/vx8h8u46/

检查.panel元素，你会发现它的边界矩形不会从左边开始。

如果单击按钮删除一个项目，那么突然之间的边界矩形是正确的。

当 面板的 高度超过某个阈值时，会出现这种情况，但此时只是猜测。有工作吗？

＆＃13;

＆＃13;

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();

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

列的子项必须是内联的，因此以下代码应该可以正常工作：

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

整个片段：

＆＃13;

＆＃13;

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();

＆＃13;

* {
  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  */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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();

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

用户Border替换为outline班级中的.item

CSS边框属性允许您指定元素边框的样式和颜色。

轮廓是围绕元素（边框外）绘制的线条，以使元素“脱颖而出”

  

CSS outline属性是一个令人困惑的属性。当你第一次学习   关于它，很难理解它是如何远程不同的   来自边境财产。 W3C将其解释为具有以下内容   差异：

     

1.Outlines不占用空间。

     

2.Outlines可能是非矩形的。

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

直播Demo

Answer 3

解决问题的简单性可能比有时更复杂化更好。我建议保留所有内容，并尝试添加flex。它不仅可以帮助您在所有浏览器中显示，还可以在简单方法的引导程序中根据浏览器大小修改视图。尝试它，如果它做出任何不良反应请评论它。

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