将照片添加到网格时，它会更改另一个元素的布局 - 我该如何解决这个问题？

Question

我对 CSS 非常陌生，所以只是玩玩并学习新东西。我创建了一个有点混乱的网格，并尝试将一张照片添加到我的一个 div 中，但由于某种原因，当我添加它并调整其大小时，它完全改变了页面右侧元素的间距（模板博客文章）。 ）当我从 HTML 中删除图像时，它会恢复正常。如果我的代码很糟糕，我很抱歉我还是个新手，只是想尝试一下这种类型的格式。这是我的 HTML 和 CSS。

nav {
  text-align: center;
  width: 50;
  font-family: Helvetica, sans-serif;
}

body {
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: 3fr;
}

.blog {
  grid-template-rows: 1fr;
  grid-column: 3;
  width: 80%;
  gap: inherit;
  padding: 30px;
  border: 2px solid rgb(79 185 227);
  border-radius: 5px;
  margin: 20px;
}

.sidebar {
  grid-column: 1;
  width: 400px;
  border-right: 1px solid #999;
  margin-top: 20px;
}

.sidebar p {
  font-family: Monospace, sans-serif;
  padding: 10px;
}

.sidebar img {
  width: 70%;
  margin-left: 30px;
}

.title {
  text-align: center;
  width: 50;
  font-size: 120%;
}

ul {
  list-style-type: none;
  text-align: center;
  overflow: hidden;
  background-color: #8a5f88;
  height: 50px;
}

li {
  text-align: center;
  display: inline;
  margin-bottom: 10px;
}

li a {
  display: inline-block;
  color: white;
  font-family: Monospace, sans-serif;
  text-align: center;
  padding: 13px 29px;
  font-size: 140%;
  text-decoration: none;
}

li a:hover {
  background-color: #e7b4ed;
}

h2 {
  font-family: Monospace, sans-serif;
  font-size: 230%;
}

footer {
  background-color: #8a5f88;
  color: white;
  font-family: Monospace, sans-serif;
  font-size: 120%;
}

<header>
  <p class="title">will have header here with the blog title</p>
  <nav>
    <ul>
      <li><a href="main.html">Home</a></li>
      <li><a href="alarry.html">About</a></li>
      <li><a href="gallery.html">Gallery</a></li>
  </nav>
  </ul>
</header>
<div class="container">
  <div class="sidebar">
    <h2>Welcome to the Blog!</h2>
    <p>I can introduce myself here. It will be one of the first things people see when they enter the website. I can have a photo of myself and a short description, and possibly links to my socials as well.</p><img src="gallery1.jpg" class="ren" alt="Fireworks at the Faire"></p>
  </div>
  <div class="blog">
    <h2>Example Blog Title</h2>
    <p> This would begin the body of the blog post. Here I can insert photos, use headings, and write to make a blog post. I'll just have to style and position it all a certain way.</p>
  </div>

  <div class="blog">
    <h2>Second Blog Post Example</h2>
    <p>I would keep a pretty standard form and make the page simply scrollable for a while (then eventually figure out how to make more pages if I write more).</p>
  </div>
  <div class="blog">
    <h2>Another Blog Post</h2>
    <p>And that's pretty much it, I want to start very simple and just focus on making the blog posts simple, well styled, and easy to read.</p>
  </div>
</div>
<footer>
  <p>Copyright @2023 Julia Bruns</p>
</footer>

我试图确保我没有将我的 img 添加到错误的 div 中，并且以某种方式使其属性也适用于我的 .blog div。我尝试以不同的方式编写网格属性，因为我仍在学习这些方法和不同的方法，但我无法弄清楚为什么 .sidebar 中的 img 会影响 .blog。我认为它可能是 .container 但我不知道它可能是什么，或者我需要添加什么来更改它？

Answer 1

将“.blog”项目放入容器 div 中。发生的情况是，由于您使用的是网格布局，因此第一个 .blog 容器正在随侧边栏调整大小。

然后将网格和宽度 css 移动到博客容器 div。像这样：

nav {
  text-align: center;
  width: 50;
  font-family: Helvetica, sans-serif;
}

body {
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: 3fr;
}

.blogs {
  grid-template-rows: 1fr;
  grid-column: 3;
  width: 80%;
  gap: inherit;
}

.blog {
  padding: 30px;
  border: 2px solid rgb(79 185 227);
  border-radius: 5px;
  margin: 20px;
}

.sidebar {
  grid-column: 1;
  width: 400px;
  border-right: 1px solid #999;
  margin-top: 20px;
}

.sidebar p {
  font-family: Monospace, sans-serif;
  padding: 10px;
}

.sidebar img {
  width: 70%;
  margin-left: 30px;
}

.title {
  text-align: center;
  width: 50;
  font-size: 120%;
}

ul {
  list-style-type: none;
  text-align: center;
  overflow: hidden;
  background-color: #8a5f88;
  height: 50px;
}

li {
  text-align: center;
  display: inline;
  margin-bottom: 10px;
}

li a {
  display: inline-block;
  color: white;
  font-family: Monospace, sans-serif;
  text-align: center;
  padding: 13px 29px;
  font-size: 140%;
  text-decoration: none;
}

li a:hover {
  background-color: #e7b4ed;
}

h2 {
  font-family: Monospace, sans-serif;
  font-size: 230%;
}

footer {
  background-color: #8a5f88;
  color: white;
  font-family: Monospace, sans-serif;
  font-size: 120%;
}

<header>
  <p class="title">will have header here with the blog title</p>
  <nav>
    <ul>
      <li><a href="main.html">Home</a></li>
      <li><a href="alarry.html">About</a></li>
      <li><a href="gallery.html">Gallery</a></li>
  </nav>
  </ul>
</header>
<div class="container">
  <div class="sidebar">
    <h2>Welcome to the Blog!</h2>
    <p>I can introduce myself here. It will be one of the first things people see when they enter the website. I can have a photo of myself and a short description, and possibly links to my socials as well.</p><p><img src="gallery1.jpg" class="ren" alt="Fireworks at the Faire"></p>
  </div>
  <div class="blogs">
    <div class="blog">
      <h2>Example Blog Title</h2>
      <p> This would begin the body of the blog post. Here I can insert photos, use headings, and write to make a blog post. I'll just have to style and position it all a certain way.</p>
    </div>

    <div class="blog">
      <h2>Second Blog Post Example</h2>
      <p>I would keep a pretty standard form and make the page simply scrollable for a while (then eventually figure out how to make more pages if I write more).</p>
    </div>
    <div class="blog">
      <h2>Another Blog Post</h2>
      <p>And that's pretty much it, I want to start very simple and just focus on making the blog posts simple, well styled, and easy to read.</p>
    </div>
  </div>
</div>
<footer>
  <p>Copyright @2023 Julia Bruns</p>
</footer>