侧边栏中的图像？答案

【问题标题】：images within a sidebar?侧边栏中的图像？
【发布时间】：2015-12-05 13:13:43
【问题描述】：

有没有办法仅使用 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 吗？还是类？

小提琴link

【问题讨论】：

如果我正确阅读了您的解释，有一种方法可以通过使用背景图像使用 CSS 放置图像。如果我是正确的，那么我会告诉你如何。
但是我已经有一个背景图像...我正在尝试在它上面放置更多图像。我已经设法用 HTML 做到了，但我根本无法设置它们的样式。

标签： html css

【解决方案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 本身。这是你想知道的吗？还是我读错了问题？

【讨论】：

这似乎适用于填充，但边界半径不起作用。
它应该可以正常工作，因为您看不到边框半径为 10 px 的边框半径是因为 10 px 的填充如果您添加 20px 的边框半径，您将看到它或者如果您删除间距的填充和使用边距，您将看到边框半径。我在这里设置了一个小提琴来向您展示 jsfiddle.net/wamosjk/7fuj1wmL 您还可以从内联 img css 中删除高度和宽度，然后在您的 css 中声明它。

【解决方案2】：

您可以将所有图像放在一个 div 中，并使用一个类来赋予它们样式，或者不要为每个图像赋予不同的类，而是将它们放在同一个类中。喜欢

html

<aside class="sidebar2">
<div id="img1">
       <img src="goggle_kids_small.jpg" >
       <img src="waterparkkids.jpg">
       <img src="slide-01.jpg">
       <img src="park.jpg">
    </div>
</aside>

css

.sidebar2{
text-align: center;
background-image: url(Water-Drop-background.jpg);
float: right;
padding: 0 10px 0 20px;
}

.sidebar img1{
    height: 800px;
    width: 20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

或任何你想给予的东西。

【讨论】：