Question

我将图像作为网格状图库中的内联块元素，并且在代码中的某些点处存在隐藏元素，这些元素基本上是锚点，用于导航拍摄照片的不同年份。

问题是当下一年的第一张图像作为第一个元素放在一行中时，锚元素会在前一行中留下。我想要做的是将锚元素粘贴到下一个元素（图像），以便它随之破坏。

我对CSS和JS持开放态度。我意识到有更好的方法可以做到这一点，但改变HTML代码不是一个选择，因为它是更大结构的一部分，即使是微小的改变也可能导致其他脚本失败。

img {
  display: inline-block;
  width: 120px;
  height: 250px;
}

div {
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}

<html>

<head>
</head>

<body>
  <button href="#2015">2015</button>
  <button href="#2016">2016</button>

  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <div id="2015"></div>
  <!-- Anchor element -->
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <div id="2016"></div>
  <!-- Anchor element -->
</body>

</html>

Answer 1

试试这段代码

img {
  display: inline-block;
  width: 120px;
  height: 250px;
}

div {
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}

<html>

<head>

</head>

<body>
  <a href="#2015">2015</a>
  <a href="#2016">2016</a><br/>

  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="..."><br/>
  <div id="2015"></div>
  <!-- Anchor element -->
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="..."><br/>
  <div id="2016"></div>
  <!-- Anchor element -->
</body>

</html>

CSS：如果在行中的最后一行，则在元素之前换行

1 个答案: