7

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

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

这是一个例子：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>

4

3 回答 3

0

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

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

于 2016-08-10T23:11:34.620 回答
0

用户Border替换outline为.item类

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

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

CSS 大纲属性是一个令人困惑的属性。当您第一次了解它时，很难理解它与边框属性有何不同。W3C 将其解释为具有以下差异：

1.大纲不占空间。

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

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

现场演示

于 2016-08-11T09:42:57.210 回答
0

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

.classname {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
}
于 2016-08-17T10:24:41.017 回答