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

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

根据被列化的项目的总高度,其左偏移被移位,这使得难以确定项目的实际位置.渲染看起来很好,但如果你检查元素,你实际上可以看到它被相当多的偏移.

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

解决方法

用户边框替换为.item类中的轮廓

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

轮廓是围绕元素(边框外)绘制的线,以使元素“脱颖而出”

The CSS outline property is a confusing property. When you first learn
about it,it’s hard to understand how it is even remotely different
from the border property. The W3C explains it as having the following
differences:

1.Outlines do not take up space.

2.Outlines may be non-rectangular.

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

直播Demo

原文链接：https://www.f2er.com/css/215003.html

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

解决方法

猜你在找的CSS相关文章