文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么锚标签占用空间，把所有东西都推到右边？

问为什么锚标签占用空间，把所有东西都推到右边？
EN

Stack Overflow用户
提问于 2018-07-01 19:41:13
回答 1查看 68关注 0票数 0

我正在做关于CSS的教程，并使用下面的github项目

最后的外观将是像这样，但当有人单击视图属性时，您将被带到主页，继续向下听。

我的HTML如下：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png">

    <title>nexter &mdash; your home, your freedom</title>
</head>
<body class="container">
    <div class="sidebar">
        <button class="nav-btn"></button>
    </div>

    <header class="header">
        <img src="img/logo.png" alt="Nexter logo" class="header__logo">
        <h3 class="heading-3">Your own home:</h3>
        <h1 class="heading-1">The ultimate personal freedom</h1>
        <a href="#homesanchor"><button class="btn header__btn">View our properties</button></a>
        <div class="header__seenon-text">Seen on</div>
        <div class="header__seenon-logos">
            <img src="img/logo-bbc.png" alt="Seen on logo 1">
            <img src="img/logo-forbes.png" alt="Seen on logo 2">
            <img src="img/logo-techcrunch.png" alt="Seen on logo 3">
            <img src="img/logo-bi.png" alt="Seen on logo 4">
        </div>
    </header>

    <section class="features">
        <div class="feature">
            <svg class="feature__icon">
                <use xlink:href="img/sprite.svg#icon-global"></use>
            </svg>
            <h4 class="heading-4 heading-4--dark">World's best luxury homes</h4>
            <p class="feature__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.</p>
        </div>

        <div class="feature">
            <svg class="feature__icon">
                <use xlink:href="img/sprite.svg#icon-trophy"></use>
            </svg>
            <h4 class="heading-4 heading-4--dark">Only the best properties</h4>
            <p class="feature__text">Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.</p>
        </div>

        <div class="feature">
            <svg class="feature__icon">
                <use xlink:href="img/sprite.svg#icon-map-pin"></use>
            </svg>
            <h4 class="heading-4 heading-4--dark">All homes in in top locations</h4>
            <p class="feature__text">Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.</p>
        </div>

        <div class="feature">
            <svg class="feature__icon">
                <use xlink:href="img/sprite.svg#icon-key"></use>
            </svg>
            <h4 class="heading-4 heading-4--dark">New home in one week</h4>
            <p class="feature__text">Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="feature">
            <svg class="feature__icon">
                <use xlink:href="img/sprite.svg#icon-presentation"></use>
            </svg>
            <h4 class="heading-4 heading-4--dark">Top 1% realtors</h4>
            <p class="feature__text">Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.</p>
        </div>

        <div class="feature">
            <svg class="feature__icon">
                <use xlink:href="img/sprite.svg#icon-lock"></use>
            </svg>
            <h4 class="heading-4 heading-4--dark">Secure payments on nexter</h4>
            <p class="feature__text">Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia quae.</p>
        </div>
    </section>

    <section class="homes">
      <a name="homesanchor"></a>
        <div class="home">
            <img src="img/house-1.jpeg" alt="House 1" class="home__img">
            <svg class="home__like">
                <use xlink:href="img/sprite.svg#icon-heart-full"></use>
            </svg>
            <h5 class="home__name">Beautiful Familiy House</h5>
            <div class="home__location">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-map-pin"></use>
                </svg>
                <p>USA</p>
            </div>
            <div class="home__rooms">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-profile-male"></use>
                </svg>
                <p>5 rooms</p>
            </div>
            <div class="home__area">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-expand"></use>
                </svg>
                <p>325 m<sup>2</sup></p>
            </div>
            <div class="home__price">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-key"></use>
                </svg>
                <p>$1,200,000</p>
            </div>
            <button class="btn home__btn">Contact realtor</button>
        </div>


        <div class="home">
            <img src="img/house-2.jpeg" alt="House 2" class="home__img">
            <svg class="home__like">
                <use xlink:href="img/sprite.svg#icon-heart-full"></use>
            </svg>
            <h5 class="home__name">Modern Glass Villa</h5>
            <div class="home__location">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-map-pin"></use>
                </svg>
                <p>Canada</p>
            </div>
            <div class="home__rooms">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-profile-male"></use>
                </svg>
                <p>6 rooms</p>
            </div>
            <div class="home__area">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-expand"></use>
                </svg>
                <p>450 m<sup>2</sup></p>
            </div>
            <div class="home__price">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-key"></use>
                </svg>
                <p>$2,750,000</p>
            </div>
            <button class="btn home__btn">Contact realtor</button>
        </div>

        <div class="home">
            <img src="img/house-3.jpeg" alt="House 3" class="home__img">
            <svg class="home__like">
                <use xlink:href="img/sprite.svg#icon-heart-full"></use>
            </svg>
            <h5 class="home__name">Cozy Country House</h5>
            <div class="home__location">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-map-pin"></use>
                </svg>
                <p>UK</p>
            </div>
            <div class="home__rooms">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-profile-male"></use>
                </svg>
                <p>4 rooms</p>
            </div>
            <div class="home__area">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-expand"></use>
                </svg>
                <p>250 m<sup>2</sup></p>
            </div>
            <div class="home__price">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-key"></use>
                </svg>
                <p>$850,000</p>
            </div>
            <button class="btn home__btn">Contact realtor</button>
        </div>

        <div class="home">
            <img src="img/house-4.jpeg" alt="House 4" class="home__img">
            <svg class="home__like">
                <use xlink:href="img/sprite.svg#icon-heart-full"></use>
            </svg>
            <h5 class="home__name">Large Rustical Villa</h5>
            <div class="home__location">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-map-pin"></use>
                </svg>
                <p>Portugal</p>
            </div>
            <div class="home__rooms">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-profile-male"></use>
                </svg>
                <p>6 rooms</p>
            </div>
            <div class="home__area">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-expand"></use>
                </svg>
                <p>480 m<sup>2</sup></p>
            </div>
            <div class="home__price">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-key"></use>
                </svg>
                <p>$1,950,000</p>
            </div>
            <button class="btn home__btn">Contact realtor</button>
        </div>

        <div class="home">
            <img src="img/house-5.jpeg" alt="House 5" class="home__img">
            <svg class="home__like">
                <use xlink:href="img/sprite.svg#icon-heart-full"></use>
            </svg>
            <h5 class="home__name">Majestic Palace House</h5>
            <div class="home__location">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-map-pin"></use>
                </svg>
                <p>Germany</p>
            </div>
            <div class="home__rooms">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-profile-male"></use>
                </svg>
                <p>18 rooms</p>
            </div>
            <div class="home__area">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-expand"></use>
                </svg>
                <p>4230 m<sup>2</sup></p>
            </div>
            <div class="home__price">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-key"></use>
                </svg>
                <p>$9,500,000</p>
            </div>
            <button class="btn home__btn">Contact realtor</button>
        </div>

        <div class="home">
            <img src="img/house-6.jpeg" alt="House 6" class="home__img">
            <svg class="home__like">
                <use xlink:href="img/sprite.svg#icon-heart-full"></use>
            </svg>
            <h5 class="home__name">Modern Familiy Apartment</h5>
            <div class="home__location">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-map-pin"></use>
                </svg>
                <p>Italy</p>
            </div>
            <div class="home__rooms">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-profile-male"></use>
                </svg>
                <p>3 rooms</p>
            </div>
            <div class="home__area">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-expand"></use>
                </svg>
                <p>180 m<sup>2</sup></p>
            </div>
            <div class="home__price">
                <svg>
                    <use xlink:href="img/sprite.svg#icon-key"></use>
                </svg>
                <p>$600,000</p>
            </div>
            <button class="btn home__btn">Contact realtor</button>
        </div>
    </section>


    <section class="gallery">
        <figure class="gallery__item gallery__item--1"><img src="img/gal-1.jpeg" alt="Gallery image 1" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--2"><img src="img/gal-2.jpeg" alt="Gallery image 2" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--3"><img src="img/gal-3.jpeg" alt="Gallery image 3" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--4"><img src="img/gal-4.jpeg" alt="Gallery image 4" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--5"><img src="img/gal-5.jpeg" alt="Gallery image 5" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--6"><img src="img/gal-6.jpeg" alt="Gallery image 6" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--7"><img src="img/gal-7.jpeg" alt="Gallery image 7" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--8"><img src="img/gal-8.jpeg" alt="Gallery image 8" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--9"><img src="img/gal-9.jpeg" alt="Gallery image 9" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--10"><img src="img/gal-10.jpeg" alt="Gallery image 10" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--11"><img src="img/gal-11.jpeg" alt="Gallery image 11" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--12"><img src="img/gal-12.jpeg" alt="Gallery image 12" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--13"><img src="img/gal-13.jpeg" alt="Gallery image 13" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--14"><img src="img/gal-14.jpeg" alt="Gallery image 14" class="gallery__img"></figure>


    </section>

    <footer class="footer">
        <ul class="nav">
                <li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
        </ul>
        <p class="copyright">
            &copy; Copyright 2017 by Jonas Schmedtmann. Feel free to use this project for your own purposes. This does NOT apply if you plan to produce your own course or tutorials based on this project.
        </p>
    </footer>
</body>

​

我的CSS如下(存储为style.css)

代码语言：javascript
复制
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 50%; } }

body {
  font-family: "Nunito", sans-serif;
  color: #6D5D4B;
  font-weight: 300;
  line-height: 1.6; }

.container {
  display: grid;
  grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
  grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; }
  @media only screen and (max-width: 62.5em) {
    .container {
      grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
      grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; } }
  @media only screen and (max-width: 50em) {
    .container {
      grid-template-rows: 6rem calc(100vh - 6rem); } }

.heading-1, .heading-2, .heading-3, .heading-4 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400; }

.heading-1 {
  font-size: 4.5rem;
  color: #f9f7f6;
  line-height: 1; }

.heading-2 {
  font-size: 4rem;
  font-style: italic;
  line-height: 1; }
  .heading-2--light {
    color: #f9f7f6; }
  .heading-2--dark {
    color: #54483A; }

.heading-3 {
  font-size: 1.6rem;
  color: #c69963;
  text-transform: uppercase; }

.heading-4 {
  font-size: 1.9rem; }
  .heading-4--light {
    color: #f9f7f6; }
  .heading-4--dark {
    color: #54483A; }

.btn {
  background-color: #c69963;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 1.8rem 3rem;
  cursor: pointer;
  transition: all .2s; }
  .btn:hover {
    background-color: #B28451; }

.mb-sm {
  margin-bottom: 2rem; }

.mb-md {
  margin-bottom: 3rem; }

.mb-lg {
  margin-bottom: 4rem; }

.mb-hg {
  margin-bottom: 8rem; }

.sidebar {
  background-color: #c69963;
  grid-column: sidebar-start / sidebar-end;
  grid-row: 1 / -1;
  display: flex;
  justify-content: center; }
  @media only screen and (max-width: 62.5em) {
    .sidebar {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      justify-content: flex-end;
      align-items: center; } }

.nav-btn {
  border: none;
  border-radius: 0;
  background-color: #fff;
  height: 2px;
  width: 4.5rem;
  margin-top: 4rem; }
  .nav-btn::before, .nav-btn::after {
    background-color: #fff;
    height: 2px;
    width: 4.5rem;
    content: "";
    display: block; }
  .nav-btn::before {
    transform: translateY(-1.5rem); }
  .nav-btn::after {
    transform: translateY(1.3rem); }
  @media only screen and (max-width: 62.5em) {
    .nav-btn {
      margin-top: 0;
      margin-right: 3rem; }
      .nav-btn::before {
        transform: translateY(-1.2rem); }
      .nav-btn::after {
        transform: translateY(1rem); } }

.header {
  background-color: #54483A;
  grid-column: full-start / col-end 6;
  background-image: linear-gradient(rgba(16, 29, 44, 0.93), rgba(16, 29, 44, 0.93)), url(../img/hero.jpeg);
  background-size: cover;
  background-position: center;
  padding: 8rem;
  padding-top: 4rem;
  display: grid;
  grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr;
  grid-template-columns: minmax(min-content, max-content);
  grid-row-gap: 1.5rem;
  justify-content: center; }
  @media only screen and (max-width: 50em) {
    .header {
      grid-column: 1 / -1; } }
  @media only screen and (max-width: 37.5em) {
    .header {
      padding: 5rem; } }
  .header__logo {
    height: 3rem;
    justify-self: center; }
  .header__btn {
    align-self: start;
    justify-self: start; }
  .header__seenon-text {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-column-gap: 1.5rem;
    align-items: center;
    font-size: 1.6rem;
    color: #aaa; }
    .header__seenon-text::before, .header__seenon-text::after {
      content: "";
      height: 1px;
      display: block;
      background-color: currentColor; }
  .header__seenon-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 3rem;
    justify-items: center;
    align-items: center; }
    .header__seenon-logos img {
      max-height: 2.5rem;
      max-width: 100%;
      filter: brightness(70%); }

.realtors {
  background-color: #101d2c;
  grid-column: col-start 7 / full-end;
  padding: 3rem;
  display: grid;
  align-content: center;
  justify-content: center;
  justify-items: center;
  grid-row-gap: 2rem; }
  @media only screen and (max-width: 50em) {
    .realtors {
      grid-column: 1 / -1; } }
  .realtors__list {
    display: grid;
    grid-template-columns: min-content max-content;
    grid-column-gap: 2rem;
    grid-row-gap: 5vh;
    align-items: center; }
    @media only screen and (max-width: 50em) {
      .realtors__list {
        grid-template-columns: repeat(3, min-content max-content); } }
    @media only screen and (max-width: 37.5em) {
      .realtors__list {
        grid-template-columns: min-content max-content; } }
  .realtors__img {
    width: 7rem;
    border-radius: 50%;
    display: block; }
  .realtors__sold {
    text-transform: uppercase;
    color: #aaa;
    margin-top: -3px; }

.features {
  grid-column: center-start / center-end;
  margin: 15rem 0; }
  @supports (display: grid) {
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
      grid-gap: 6rem;
      align-items: start; } }

.feature {
  float: left;
  width: 33.3333%;
  margin-bottom: 6rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-row-gap: 1.5rem;
  grid-column-gap: 2.5rem; }
  @supports (display: grid) {
    .feature {
      width: auto;
      margin-bottom: 0; } }
  .feature__icon {
    fill: #c69963;
    width: 4.5rem;
    height: 4.5rem;
    grid-row: 1 / span 2;
    transform: translateY(-1rem); }
  .feature__text {
    font-size: 1.7rem; }

.story__pictures {
  background-color: #c69963;
  grid-column: full-start / col-end 4;
  background-image: linear-gradient(rgba(198, 153, 99, 0.5), rgba(198, 153, 99, 0.5)), url(../img/back.jpg);
  background-size: cover;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  align-items: center; }
  @media only screen and (max-width: 50em) {
    .story__pictures {
      grid-column: 1 / -1;
      padding: 6rem; } }

.story__img--1 {
  width: 100%;
  grid-row: 2 / 6;
  grid-column: 2 / 6;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1); }
  @media only screen and (max-width: 50em) {
    .story__img--1 {
      grid-column: 1 / 5;
      grid-row: 1 / -1; } }

.story__img--2 {
  width: 115%;
  grid-row: 4 / 6;
  grid-column: 4 / 7;
  z-index: 20;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); }
  @media only screen and (max-width: 50em) {
    .story__img--2 {
      grid-row: 1 / -1;
      width: 100%; } }

.story__content {
  background-color: #f9f7f6;
  grid-column: col-start 5 / full-end;
  padding: 6rem 8vw;
  /*
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        */
  display: grid;
  align-content: center;
  justify-items: start; }
  @media only screen and (max-width: 50em) {
    .story__content {
      grid-column: 1 / -1;
      grid-row: 5 / 6; } }

.story__text {
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 4rem; }

.homes {
  grid-column: center-start / center-end;
  margin: 15rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 7rem; }

.home {
  background-color: #f9f7f6;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 3.5rem; }
  .home__img {
    width: 100%;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    z-index: 1; }
  .home__like {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    fill: #c69963;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 2;
    justify-self: end;
    margin: 1rem; }
  .home__name {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: end;
    z-index: 3;
    width: 80%;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.6rem;
    text-align: center;
    padding: 1.25rem;
    background-color: #101d2c;
    color: #fff;
    font-weight: 400;
    transform: translateY(50%); }
  .home__location, .home__rooms {
    margin-top: 2.5rem; }
  .home__location, .home__rooms, .home__area, .home__price {
    font-size: 1.5rem;
    margin-left: 2rem;
    display: flex;
    align-items: center; }
    .home__location svg, .home__rooms svg, .home__area svg, .home__price svg {
      fill: #c69963;
      height: 2rem;
      width: 2rem;
      margin-right: 1rem; }
  .home__btn {
    grid-column: 1 / -1; }

.gallery {
  background-color: #f9f7f6;
  grid-column: full-start / full-end;
  display: grid;
  /*grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 5vw);*/
  grid-template: repeat(7, 5vw)/repeat(8, 1fr);
  grid-gap: 1.5rem;
  padding: 1.5rem; }
  .gallery__item--1 {
    grid-row: 1 / span 2;
    grid-column: 1 / span 2; }
  .gallery__item--2 {
    grid-row: 1 / span 3;
    grid-column: 3 / span 3; }
  .gallery__item--3 {
    grid-row: 1 / span 2;
    grid-column: 6 / 7; }
  .gallery__item--4 {
    grid-row: 1 / span 2;
    grid-column: 7 / -1; }
  .gallery__item--5 {
    grid-row: 3 / span 3;
    grid-column: 1 / span 2; }
  .gallery__item--6 {
    grid-row: 4 / span 2;
    grid-column: 3 / span 2; }
  .gallery__item--7 {
    grid-row: 4 / 5;
    grid-column: 5 / 6; }
  .gallery__item--8 {
    grid-row: 3 / span 2;
    grid-column: 6 / span 2; }
  .gallery__item--9 {
    grid-row: 3 / span 3;
    grid-column: 8 / -1; }
  .gallery__item--10 {
    grid-row: 6 / span 2;
    grid-column: 1 / 2; }
  .gallery__item--11 {
    grid-row: 6 / span 2;
    grid-column: 2 / span 2; }
  .gallery__item--12 {
    grid-row: 6 / span 2;
    grid-column: 4 / 5; }
  .gallery__item--13 {
    grid-row: 5 / span 3;
    grid-column: 5 / span 3; }
  .gallery__item--14 {
    grid-row: 6 / span 2;
    grid-column: 8 / -1; }
  .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.footer {
  background-color: #101d2c;
  grid-column: full-start / full-end;
  padding: 8rem; }

.nav {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center; }
  .nav__link:link, .nav__link:visited {
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
    text-transform: uppercase;
    text-align: center;
    padding: 1.5rem;
    display: block;
    transition: all .2s; }
  .nav__link:hover, .nav__link:active {
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px); }

.copyright {
  font-size: 1.4rem;
  color: #aaa;
  margin-top: 6rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 70%; }

问题

当有人单击时，查看属性锚标记主锚。我的问题是为什么锚标签推动第一个家(美丽的家庭家园)和它的图片/信息向右？我以为主播不会占用任何空间？此外，为什么拼贴/图片库(类画廊)与家庭(类家园)重叠？这是我看到的照片

​

html
css
css-grid
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-01 19:51:45

它是网格的子元素。在这方面，它和div没有什么不同。

把锚卸了。当HTML4在20年前问世时，它们作为链接目标的使用被id属性所取代。

代码语言：javascript
复制
<section class="homes" id="homesanchor">
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51126466

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档