锚标记转到网页的错误部分

【问题标题】：Anchor tag goes to the wrong section of a web page锚标记转到网页的错误部分
【发布时间】：2023-03-27 08:45:02
【问题描述】：

这是问题所在的实际视频记录（我不想以任何方式做广告）：https://www.youtube.com/watch?v=7b38cQ0VGWI

所以我创建一个网站只是为了练习，一切都很顺利，直到我遇到这个问题。我有 2 个<nav> 菜单，其中顶部的主导航栏将一个引导到另一个页面，而第二个导航栏将一个引导到同一页面中的某个部分。但是我遇到了第二个导航栏的问题。所以下面是我正在使用的html：

<nav class="navbar">
        <div class="container">
            <ul>
                <li><a href="#drama">Drama</a></li>
                <li><a href="#comedy">Comedy</a></li>
                <li><a href="#romance">Romance</a></li>
                <li><a href="#action">Action</a></li>
            </ul>
        </div>
    </nav>

这是一系列电影图片列表，但我只是在下面输入2作为示例：

<div class="grid-picture">
    <!--First row of movies-->
        <div id="action">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg">
                    <h3>John Wick</h3>
                        <p>Action, Crime, Triller</p>
                </a>
            </div>
        </div>
<br>
        <!--1st row of romance movies-->
        <div id="romance">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>
       </div>
</div>

如您所见，“John Wick”位于 ID 为“action”的 div 标签内，而“Love, Rosie”位于 ID 为“romance”的 div 标签内。现在，“操作”链接工作正常；它将页面准确地引导到“动作”ID 中的电影所在的位置。然而，当我点击“浪漫”链接时，它并没有把我带到网站的底部。相反，它会将我带到同一个地方，就像我单击“操作”链接一样。

所以基本上，锚标记对我不起作用，即使我确保输入 href="#romance" 并且确保在 ID 为“romance”的 div 标记中环绕电影“Love, Rosie” .外部链接工作得很好，只是内部链接没有像我想象的那样工作。我还四倍检查了我是否有任何未关闭的 div 标签，但事实并非如此。

所有电影都在同一个页面中。

以下是 CSS（抱歉，混乱，仍在努力）：

body {
    margin: 0;
    line-height: 1.6em;
    font-size: 16px;
    font-family: sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    overflow:hidden;
}

nav {
    margin: 0;
    color: #E52EAE;
    z-index: 1;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline;
}

nav a{
    text-decoration: none;
    color: white;
    padding-right: 18px;
    padding-bottom: 5px;
    text-align: center;
    float: right;
}

.navbar {
    margin-right: 227px;
    position: relative;
    font-size: 30px;
    color: #22D8E5;
}

.navbar a:visited {
    color: #22D8E5;
}

.navbar a:hover {
    color: red;
}

#showcase {
    background-image:url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
    background-position: center right;
    background-color: black;
    background-size: 850px;
    background-position: left;
    height: 300px;
    text-align: center;
    color: white;
}

.movies {
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding: 1px;
}

.movies img {
    height: 500px;
    width: 100%;
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    color: coral;
}

a:hover {
    color: red;
}

这是整个 html：

<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>

<section id="showcase">
    <nav id="main-nav">
        <div class="container">
            <ul>
                <li><a href="#">Etc</a></li>
                <li><a href="#">Animation</a></li>
                <li><a href="#">LaughTime</a></li>
                <li><a href="movies.index.html">Movies</a></li>
                <li><a href="practice3.index.html">Home</a></li>
            </ul>
        </div>
    </nav>
        <div class="container">
            <h1>Movie List</h1>

    <nav class="navbar">
        <div class="container">
            <ul>
                <li><a href="#drama">Drama</a></li>
                <li><a href="#comedy">Comedy</a></li>
                <li><a href="#romance">Romance</a></li>
                <li><a href="#action">Action</a></li>
            </ul>
        </div>
    </nav>
        </div>
</section>


<div class="grid-picture">
    <!--First row of movies-->
        <div id="action">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
                    <h3>John Wick</h3>
                        <p>Action, Crime, Triller</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2802144/" target="_blank">
                <img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
                    <h3>Kingsmen</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2381249/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
                    <h3>Mission Impossible: Rogue Nation</h3>
                        <p>Action, Adventure, Thriller</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0468569/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
                    <h3>The Dark Knight</h3>
                        <p>Action, Crime, Drama</p>
                </a>
            </div>

        <br>
        <!--2nd row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1431045/" target="_blank">
                <img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
                    <h3>Deadpool</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt3315342/" target="_blank">
                <img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
                    <h3>Logan</h3>
                        <p>Action, Drama, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt6806448/" target="_blank">
                <img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
                    <h3>Fast & Furious: Hobbs & Shaw</h3>
                        <p>Action, Adventure</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0371746/" target="_blank">
                <img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
                    <h3>Iron Man</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>


        <br>
        <!--3rd row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt3501632/" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
                    <h3>Thor: Ragnarok</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1631867/" target="_blank">
                <img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
                    <h3>Edge of Tomorrow</h3>
                        <p>Action, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
                    <h3>Non-Stop</h3>
                        <p>Action, Thriller, Mystery</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
                    <h3>Taken</h3>
                        <p>Action, Thriller</p>
                </a>
            </div>


        <br>
        <!--4th row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
                    <h3>Avengers: Infinity War</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
                    <h3>Avengers: Endgame</h3>
                        <p>Action, Adventure, Drama</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
                    <h3>John Wick 3: Chapter 3 - Parabellum</h3>
                        <p>Action, Crime, Thriller</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
                    <h3>Venom</h3>
                        <p>Action, Sci-Fi, Thriller</p>
                </a>
            </div>


        <br>
        <!--5th row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
                    <h3>Guardians of the Galaxy</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
                <img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
                    <h3>Captain America: Civil War</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
                <img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
                    <h3>Spiderman</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
                <img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
                    <h3>Mission Impossible: Fallout</h3>
                        <p>Action, Adventure, Thriller</p>
                </a>
            </div>


        <br>
        <!--6th row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
                    <h3>The Maze Runner</h3>
                        <p>Action, Mystery, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
                <img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
                    <h3>Ant-Man and the Wasp</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
                <img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
                    <h3>범죄와의 전</h3>
                        <p>Action, Crime, Drama</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
                <img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
                    <h3>신세계</h3>
                        <p>Action, Crime, Drama</p>
                </a>
            </div>
        </div>


        <br>
        <!--1st row of romance movies-->
        <div id="romance">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
                    <h3>About Time</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
                    <h3>The Proposal</h3>
                        <p>Comedy, Drama, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1129423/">
                <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
                    <h3>Fireproof</h3>
                        <p>Drama, Romance</p>
                </a>
            </div>
        </div>

        <br>
        <!--1st row of comedy movies-->
        <div id="comedy">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
                    <h3>About Time</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
                    <h3>The Proposal</h3>
                        <p>Comedy, Drama, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1129423/">
                <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
                    <h3>Fireproof</h3>
                        <p>Drama, Romance</p>
                </a>
            </div>
        </div>




</div>

</body>
</html>

【问题讨论】：

  • 看起来没问题，请参阅JSFiddle - 可能提供您所有的 HTML，很可能您有一段无效代码阻止了此操作。或者，使用HTML Validation Service 看看您是否可以自己找到问题！
  • 如@EGC 所述，请提供更多代码。我测试了上面的代码，它按预期工作，所以问题出在其他地方。
  • @JosephKim 如果您可以在此处或在 JSFiddle 或类似中发布一个最小的工作示例，那么我们可以对其进行测试并告诉您问题出在哪里，那将是最好的。我测试了这段代码，它做了你想要的。在这里查看JSFiddle
  • 好的，谢谢，我去看看。
  • @JosephKim 我在下面写的解决方案对你有用吗？

标签： html css anchor href


【解决方案1】：

以下是您提供的代码的工作示例。变化是：

  • 将position:relative; 添加到.movies CSS 类
  • 在 CSS 中添加了 .grid-picture { position:relative; float:left; }
  • 在每个电影类别结束 &lt;/div&gt; 标记之前添加了&lt;br style="clear:both;"/&gt;，以确保 div 调整大小以匹配其内容的高度（老技巧）

注意：我还稍微整理了您的代码。您可以运行下面的示例进行测试。

body {
  margin: 0;
  line-height: 1.6em;
  font-size: 16px;
  font-family: sans-serif;

}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  margin: 0;
  color: #E52EAE;
  z-index: 1;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
}

nav a{
  text-decoration: none;
  color: white;
  padding-right: 18px;
  padding-bottom: 5px;
  text-align: center;
  float: right;
}

.navbar {
  margin-right: 227px;
  position: relative;
  font-size: 30px;
  color: #22D8E5;
}

.navbar a:visited {
  color: #22D8E5;
}

.navbar a:hover {
  color: red;
}

#showcase {
  background-image: url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
  background-position: center right;
  background-color: black;
  background-size: 850px;
  background-position: left;
  height: 300px;
  text-align: center;
  color: white;
}

.movies {
  position:relative;
  float:left;
  box-sizing: border-box;
  width: 25%;
  padding: 1px;
}

.movies img {
  height: 500px;
  width: 100%;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  color: coral;
}

a:hover {
  color: red;
}

.grid-picture {
  position:relative;
  float:left;
}
<!DOCTYPE html>
<html>
<head>
  <title>My Video Library</title>
  <link rel="stylesheet" type="text/css" href="movies.css">
</head>

<body>
  <section id="showcase">
    <nav id="main-nav">
      <div class="container">
        <ul>
          <li><a href="#">Etc</a></li>
          <li><a href="#">Animation</a></li>
          <li><a href="#">LaughTime</a></li>
          <li><a href="movies.index.html">Movies</a></li>
          <li><a href="practice3.index.html">Home</a></li>
        </ul>
      </div>
    </nav>
    
    <div class="container">
      <h1>Movie List</h1>

      <nav class="navbar">
        <div class="container">
          <ul>
            <li><a href="#drama">Drama</a></li>
            <li><a href="#comedy">Comedy</a></li>
            <li><a href="#romance">Romance</a></li>
            <li><a href="#action">Action</a></li>
          </ul>
        </div>
      </nav>
    </div>
  </section>


  <div class="grid-picture">
    <!--First row of movies-->
    <div id="action">
      <div class="movies">
        <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
          <h3>John Wick</h3>
          <p>Action, Crime, Triller</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2802144/" target="_blank">
          <img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
          <h3>Kingsmen</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2381249/" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
          <h3>Mission Impossible: Rogue Nation</h3>
          <p>Action, Adventure, Thriller</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0468569/" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
          <h3>The Dark Knight</h3>
          <p>Action, Crime, Drama</p>
        </a>
      </div>

      <br>
      <!--2nd row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1431045/" target="_blank">
          <img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
          <h3>Deadpool</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt3315342/" target="_blank">
          <img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
          <h3>Logan</h3>
          <p>Action, Drama, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt6806448/" target="_blank">
          <img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
          <h3>Fast & Furious: Hobbs & Shaw</h3>
          <p>Action, Adventure</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0371746/" target="_blank">
          <img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
          <h3>Iron Man</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>


      <br>
      <!--3rd row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt3501632/" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
          <h3>Thor: Ragnarok</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1631867/" target="_blank">
          <img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
          <h3>Edge of Tomorrow</h3>
          <p>Action, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
          <h3>Non-Stop</h3>
          <p>Action, Thriller, Mystery</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
          <h3>Taken</h3>
          <p>Action, Thriller</p>
        </a>
      </div>


      <br>
      <!--4th row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
          <h3>Avengers: Infinity War</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
          <h3>Avengers: Endgame</h3>
          <p>Action, Adventure, Drama</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
          <h3>John Wick 3: Chapter 3 - Parabellum</h3>
          <p>Action, Crime, Thriller</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
          <h3>Venom</h3>
          <p>Action, Sci-Fi, Thriller</p>
        </a>
      </div>


      <br>
      <!--5th row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
          <h3>Guardians of the Galaxy</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
          <img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
          <h3>Captain America: Civil War</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
          <img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
          <h3>Spiderman</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
          <img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
          <h3>Mission Impossible: Fallout</h3>
          <p>Action, Adventure, Thriller</p>
        </a>
      </div>


      <br>
      <!--6th row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
          <h3>The Maze Runner</h3>
          <p>Action, Mystery, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
          <img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
          <h3>Ant-Man and the Wasp</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
          <img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
          <h3>범죄와의 전</h3>
          <p>Action, Crime, Drama</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
          <img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
          <h3>신세계</h3>
          <p>Action, Crime, Drama</p>
        </a>
      </div>
      <br style="clear:both;" />
    </div>


    <br>
    <!--1st row of romance movies-->
    <div id="romance">
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
          <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
          <h3>Love, Rosie</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
          <h3>About Time</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
          <h3>The Proposal</h3>
          <p>Comedy, Drama, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1129423/">
          <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
          <h3>Fireproof</h3>
          <p>Drama, Romance</p>
        </a>
      </div>
    </div>

    <br>
    <!--1st row of comedy movies-->
    <div id="comedy">
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
          <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
          <h3>Love, Rosie</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
          <h3>About Time</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
          <h3>The Proposal</h3>
          <p>Comedy, Drama, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1129423/">
          <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
          <h3>Fireproof</h3>
          <p>Drama, Romance</p>
        </a>
      </div>
      <br style="clear:both;" />
    </div>
  </div>
</body>
</html>

【讨论】：

  • 天啊……你真是个天才！救生员甚至大声笑。花了 30 多个小时试图找出问题所在，即使在网上询问后也从未真正得到具体答案。 Tbh 我仍然有点困惑，为什么您添加的那些“代码”对于锚链接正常工作是必要的，但无论哪种方式，我都会确保努力研究它。再次感谢您的帮助！！！
  • @JosephKim 欢迎您。很高兴它对你有效。添加position: relative; 和float:left; 有助于将元素定位在其父元素中。 &lt;br style="clear: both;" /&gt; 是一个古老的技巧，它强制父元素采用其最高子元素的高度。但该指令必须是关闭父级的 &lt;/div&gt; 标记之前的最后一行代码才能使其工作。这也可以通过添加更多的 CSS 规则来解决。
【解决方案2】：

指向锚点的链接只会滚动页面，因此如果您在页面底部设置指向锚点的链接，则网站无法滚动到内容末尾为止。 这可能是您的问题。如果您设置 .grid-picture 容器到一个巨大的值，使页面滚动到实际内容的高度之外。

【讨论】：

    【解决方案3】：

    我想你正在寻找这个gallery filter

    filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
    * {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
    <!-- MAIN (Center website) -->
<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('nature')"> Nature</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('people')"> People</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/cars1.jpg" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/cars2.jpg" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/cars3.jpg" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/people1.jpg" alt="Car" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/people2.jpg" alt="Car" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/people3.jpg" alt="Car" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

    【讨论】：

      猜你喜欢
      • 2023-01-22
      • 2019-01-15
      • 2017-05-23
      • 1970-01-01
      • 2012-11-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-04-16
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode