我正在尝试弄清楚如何使边框恰好适合一组图像。正如您在此 Jsfiddle 中看到的那样我发布了，边框适合上 Angular 和左 Angular ，但它并不完全适合下 Angular 和右 Angular 。 这是我的 html:
<!DOCTYPE html>
<html>
<head>
<title>Gallery Test</title>
<link type="text/css" rel="stylesheet" href="CSS.css"/>
</head>
<div class="album">
<span><img class="img1" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg">
</span>
<span><img class="img2" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg">
</span>
<span><img class="img3" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg">
</span>
</div>
</html>
这是我的 CSS:
.img1{
border-width:4px;
border-style:solid;
}
.img2 {
position:relative;
right: 90px;
top:5px;
z-index:-1;
border-width:4px;
border-style:solid;
}
.img3{
position:relative;
right:180px;
top:10px;
z-index:-2;
border-width:4px;
border-style:solid;
}
.album {
border-width:2px;
border-style:solid;
border-color:#78c9a9;
display:inline-block;
}
#imgAlbum {
height:150px;
width:100px;
}
p {
color:red;
}
提前致谢!
最佳答案
您的 CSS/HTML 中存在一些错误。我更正了它们并 float 了图像，以便边界准确地敲击它们。我还删除了 <span>未使用的标记。
HTML :
<div id="album">
<img id="img1" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg" />
<img id="img2" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg" />
<img id="img3" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg" />
</div>
CSS:
#img2 {
z-index:-1;
margin: 5px 0 0 -90px;
}
#img3{
z-index:-2;
margin: 10px 0 0 -80px;
}
#album {
border-width:2px;
border-style:solid;
border-color:#78c9a9;
display:inline-block;
}
.imgAlbum {
position:relative;
height:150px;
width:100px;
border:4px solid #000;
display:block;
float:left;
}
p {
color:red;
}
关于html - 如何使一组图片环绕边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23939261/