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吗？还是班级？

小提琴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本身。这是你想知道的吗？或者我读错了这个问题？

Answer 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;
}

或者你想要给予的任何东西。

侧边栏中的图片？

2 个答案: