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

用户 Border 在 .item 类中替换为 outline

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

轮廓线是围绕元素（边界外）绘制的一条线，以使元素“突出”

CSS 大纲属性是一个令人困惑的属性。当你第一次学习 关于它，很难理解它有什么不同 从边界属性。 W3C 将其解释为具有以下内容 区别：

1.大纲不占空间。

2.轮廓可以是非矩形的。

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

直播Demo

Answer 2

列的子元素必须是内联的，所以下面的代码应该可以正常工作：

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

还有整个sn-p：

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 3

有时，解决问题的简单性总比使问题复杂化要好。我建议保持一切原样并尝试添加弹性。它不仅可以帮助您在所有浏览器中显示，还可以根据浏览器大小在引导程序中修改视图，就像简单的方法一样。试试看，如果它做出任何不受欢迎的反应，请发表评论。

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