CSS:如果排在第一个，则在元素之前断开

我将图像作为网格般的画廊中的内联块元素，而在代码的某些时候，有一个隐藏的元素基本上是锚定，这些元素是在不同年份导航的锚固元素。

问题是，当第二年的第一年图像连续将第一个元素放置在上一行中。我想做的是将锚元素粘贴到下一个元素(图像(上，因此它会与之折断。

我对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>

尝试此代码

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>

相关内容

最新更新

热门标签：