html - CSS - 图像无响应

Question

如果您查看www.markallanholley.com，您会注意到右侧的机器人女孩图像根本没有响应。我已经编写了我认为是处理它的正确方法的代码，但我没有任何运气。我想知道是否有人会看看。

我绝对确定 CSS 正确地定位了 HTML，因为我通过将背景颜色更改为绿色并将背景变为绿色进行了一些测试。然后我删除了那行代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  font-size: 110%;
  font-family: 'Work Sans', sans-serif;
}

nav li {
  display: inline-block;
  list-style: none;
}

footer li {
  display: inline-block;
  list-style: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1fr, 10px, 1fr));
  grid-template-rows: 1fr, 80%, 1fr;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

.top {
  grid-row: 1 / span 1;
  grid-column: 1 / span 3;
}

.leftsection {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
}

.divider {
  grid-row: 2 / span 4;
  grid-column: 2 / span 1;
}

.rightsection {
  grid-row: 2 / span 1;
  grid-column: 3 / span 1;
}

.bottom {
  grid-row: 3 / span 1;
  grid-column: 1 / span 3;
}

.responsive {
  max-width: 100%;
  height: auto;
}

img:hover {
  transform: scale(1.1);
}


/* unvisited link */

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


/* visited link */

a:visited {
  color: gray;
  font-weight: bold;
  text-decoration: none;
}


/* mouse over link */

a:hover {
  color: purple;
  font-weight: bold;
  text-decoration: none;
}


/* selected link */

a:active {
  color: lightpurple;
  font-weight: bold;
  text-decoration: none;
}


/* Fonts from Google Fonts */


/*
    font-family: 'Forum', cursive;
    font-family: 'Patua One', cursive;
    font-family: 'Work Sans', sans-serif;

*/

<link href="https://fonts.googleapis.com/css2?family=Forum&family=Patua+One&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<div class="container">
  <nav class="top">
    <img src="http://www.markallanholley.com/links/topnavbackground.jpg">
    <a href="../index.html"><img src="http://www.markallanholley.com/links/mahlogo.png"></a>
    <ul>
      <li><a href="bio.html">Bio</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="community/index.php">Community</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
    </ul>
  </nav>
  <section class="leftsection">
    <h1>Hello and Welcome</h1>
    <br>
    <p>I’m a designer living in Central New York. This website is still being constructed. If you’d like to learn more about me and the type of work that I do, please select <a href="bio.html">Bio</a> or <a href="portfolio.html">Portfolio</a> from the links.
      If you’ve hired me and if you want to view a work in progress, please log in using the <a href="login.html">Login</a> link. I have a Contact form for you if you select <a href="contact.html">Contact</a>, or you can email me anytime at:</p>
    <br>
    <address>
      <a href="mailto:[e-mail]">[e-mail]</a>
    </address>
    <br>
    <p>The Community link is just me practicing installing forum software. You’re welcome to register if you’d like, but I don’t anticipate any activity there.</p>
  </section>
  <div class="divider">
    <img src="http://www.markallanholley.com/links/verticaldivider.png" height="966" width="10">
  </div>
  <section class="rightsection">
    <figure>
      <img src="http://www.markallanholley.com/links/notarobot.jpg" alt="Sad robot looking at computer." class="responsive">
      <figcaption>"Not A Robot" 2019, Blender, Photoshop</figcaption>
    </figure>
  </section>
  <footer class="bottom">
    <ul>
      <li><a href="bio.html">Bio </a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="community/index.php">Community</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="portfolio.html">Portfolio </a></li>
      <li>&#8226; Copyright 2020 Mark Holley</li>
    </ul>
  </footer>
</div>

JSFiddle

标签： htmlcss

Answer 1

您的实现grid-template-columns有错误。你可以通过浏览器快速查看.container类。

这是一个快速修复，可能不是您想要的，所以请随时调整。

grid-template-columns: 1fr 10px 1fr;

这是通过小调整修复的屏幕共享。

https://www.loom.com/share/3814415fcee84b8ba3e2e043daeed029