html - 侧边栏中的图像？

Question

有没有办法仅使用 CSS 将图像放置到侧边栏上？愚蠢的问题我敢肯定，但我正在尝试在我为类构建的这个小网站的每个侧边栏上获取一些图像。我将它们包裹在我的 HTML 中的一个 div 中，但是当我尝试将它们作为目标以提供填充、边距、边框半径时……似乎没有任何效果。这是 CSS 和 HTML。任何帮助都会很棒!

(考虑到我真的不知道如何定位它们，只有一小部分 CSS)

 <h2>Where to?</h2>

<div id="mainnav">

  <ul>
<li><a href="index.html">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
    </ul>

</div>

<div id="one">
<img src="surprisedgirl.jpg" height="200" width="250">
</div>

    </aside>

<aside class="sidebar2">

    <div id="img1">
    <img src="goggle_kids_small.jpg" height="150" width="200">
    </div>

    <div id="img2">
    <img src="waterparkkids.jpg" height="150" width="250">
    </div>

    <div id="img3">
    <img src="slide-01.jpg" height="150" width="200">
    </div>

    <div id="img4">
   <img src="park.jpg" height="300" width="270">
    </div>


    </aside>

 #one{border-radius: 50%;

}

我需要定位 div 吗？还是类(class)？

fiddle link

Answer 1

首先，您可能想将样式标签放在文档的头部，但不确定您是否知道这一点，因为您的代码下有#one{border-radius: 所以将其放在文档的头部或一个带有样式表链接的样式表，但要定位元素，您需要定位 div 和 div 内的图像。所以它在你的文档的头部看起来像这样

<style>
#one img {
  border-radius: 10px;
  padding:10px;
  margin:10px;
  width: 250px;
  height: 200px;
}
#img1 img{
  border-radius: 10px;
  padding:10px;
  margin:10px;
  width: 250px;
  height: 200px;
}
#img2 img{
  border-radius: 10px;
  padding:10px;
  margin:10px;
  width: 250px;
  height: 200px;
}
#img3 img{
  border-radius: 10px;
  padding:10px;
  margin:10px;
  width: 250px;
  height: 200px;
}
#img4 img{
  border-radius: 10px;
  padding:10px;
  margin:10px;
  width: 250px;
  height: 200px;
}
</style>

如您所见，我们的目标是图像所在的 div，然后是 img 本身。这就是你想知道的吗？还是我读错了问题？