小编Aar*_*shi的帖子

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

关于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();
Run Code Online (Sandbox Code Playgroud)
* {
  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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="panel">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div …
Run Code Online (Sandbox Code Playgroud)

css css3 css-multicolumn-layout

7
推荐指数
1
解决办法
628
查看次数

标签 统计

css ×1

css-multicolumn-layout ×1

css3 ×1