7

Chrome でのみ表示される CSS 列レイアウトに関して、非常に奇妙な動作に遭遇しました。

列化されるアイテムの全体的な高さに応じて、左オフセットがシフトされ、アイテムの実際の位置を特定するのが難しくなります。レンダリングは問題ないように見えますが、要素を調べると、実際にはかなりオフセットされていることがわかります。

例を次に示します: https://jsfiddle.net/vx8h8u46/

.panel 要素を調べると、境界矩形が左から始まらないことがわかります。 ここに画像の説明を入力

ボタンをクリックして 1 つの項目を削除すると、突然境界四角形が正しくなります。 ここに画像の説明を入力

これは、パネルの高さが特定のしきい値を超えると発生するようですが、現時点では推測にすぎません。回避策はありますか？

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

問題を複雑にするよりも、問題を単純に解決する方がよい場合があります。すべてのブラウザーで表示するのに役立つだけでなく、ブートストラップのような単純な方法でブラウザーのサイズに応じてビューを変更します。試してみて、望ましくない反応があればコメントしてください。

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

ユーザーがクラス内にBorder置換outline.item

CSS ボーダー プロパティを使用すると、要素のボーダーのスタイルと色を指定できます。

アウトラインは、要素を「目立たせる」ために要素の周囲 (境界線の外側) に描かれる線です。

CSS アウトライン プロパティは紛らわしいプロパティです。これについて初めて知ったときは、border プロパティとは少しでも違うことを理解するのは困難です。W3C は、次の違いがあると説明しています。

1.アウトラインはスペースを取りません。

2.アウトラインは長方形でなくてもかまいません。

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

ライブデモ

于 2016-08-11T09:42:57.210 に答える
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 に答える