能否在不影响相邻元素位置的情况下移除一个行内元素？

Question

能否在不影响相邻元素位置的情况下移除一个行内元素？

3

我有一个flex父元素下的5个内联正方形，当点击按钮时，将删除第一个正方形。每次删除第一个正方形时，其后面的方块会被向左推回一个方块宽度（预期的行为）。是否可能使其他正方形在发生这种情况时保持其位置（即它们停留在先前的位置而不是向左移动）？

我能想到的一种方法是通过绝对定位每个正方形元素来实现。但是这是防止正方形移动的唯一方法吗？注意: 如果我也删除了最后一个正方形，我希望正方形仍然保持它们的位置; 因此，像justify-content: flex-end这样的东西对我的需求不起作用，因为它不能同时适用于两种情况。 注意2: visibility: hidden或opacity: 0也不能满足我的需求，因为我确实需要删除方块元素。我还计划稍后附加另一个正方形元素，不希望布局发生变化。这可行吗？

请参见Fiddle以获取示例。

$('.click-me').on('click', function() {
  // Remove the first square.
  $('.main').children().first().remove();
});

.main {
  position: relative;
  display: flex;
  margin-top: 20px;
}
.main span {
  width: 35px;
  height: 35px;
  background-color: #2e852e;
  border: 1px solid #000;
}
.main .square1,
.main .square5 {
  background-color: #a5a551;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click-me">Click Me!</button>
<div class="main">
  <span class="square1"></span>
  <span class="square2"></span>
  <span class="square3"></span>
  <span class="square4"></span>
  <span class="square5"></span>
</div>

- Fuad Zeyad Tareq

2

不要删除该元素，而是给它一个类名如.hidden {pointer-events:none; opacity: 0}。 - VladykoD

1

创建一个 div，在其中放置元素，这个父 div 将一直存在，而它的子元素将消失。 - Ashish sah

我刚刚编辑了我的问题，添加了第二个注释。基本上，可见性或不透明度技巧对我没有用，因为我确实需要删除正方形元素（并计划稍后附加另一个正方形元素），并希望布局在任何情况下都不会发生移位。这可能吗？ - Fuad Zeyad Tareq

1

你可以在每个 div 周围使用一个包装元素吗？基本上是一个空的 div，带有宽度和高度，可以用你的正方形填充，如果移除包装器，则作为占位符。另一种方法是将下一个元素的 margin-left 设置为前一个元素的宽度。 - Shrimp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yaroslav Trach · Accepted Answer

更新：您可以使用grid方法并将其与使用CSS变量相结合。设置内联样式CSS变量，其中包含正方形元素的索引，然后在CSS中使用它，以便在主网格中具有这些正方形的位置。在这种情况下，您可以删除任何子元素，所有其他子元素将保留其位置。

$('.click-me').on('click', function() {
  // Remove the first square.
  $('.main').children().first().remove();
});

.main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 35px); /* create grid with 5 columns */
  margin-top: 20px;
}

.square {
  /* make it flex and align it's content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* make it square flexible element */
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #2e852e;
  border: 1px solid #000;
  color: #fff;
  /* using index of element, taken from inline styles, "auto" - callback */
  grid-column-start: var(--sq-index, auto);
}

.square--active {
  background-color: #a5a551;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click-me">Click Me!</button>
<div class="main">
  <span class="square square--active" style="--sq-index: 1;">1</span>
  <span class="square" style="--sq-index: 2;">2</span>
  <span class="square" style="--sq-index: 3;">3</span>
  <span class="square" style="--sq-index: 4;">4</span>
  <span class="square square--active" style="--sq-index: 5;">5</span>
</div>

<div class="main">
  <span class="square" style="--sq-index: 2;">2</span>
  <span class="square" style="--sq-index: 4;">4</span>
  <span class="square square--active" style="--sq-index: 5;">5</span>
</div>

<!-- 
  Example of using "auto" callback.
  Defined index of first child element, 
  all next siblings will be placed automatically
-->
<div class="main">
  <span class="square" style="--sq-index: 3;">3</span>
  <span class="square">4</span>
  <span class="square square--active">5</span>
</div>