如何在一組照片周圍做邊框？
[英]How can I make a border wrap around a group of pictures?
問題描述
我試圖弄清楚如何使邊框恰好適合一組圖像。 正如您在我發布的Jsfiddle中所看到的那樣，邊框適合於頂部和左側，而不能完全適合於底部和右側。 這是我的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;
}
提前致謝！
4 個解決方案
解決方案1
1 已采納 2014-05-29 17:40:30
您的CSS / HTML中有一些錯誤。 我更正了它們，並漂浮了這些圖像，以便邊框准確地將它們強奸。 我還刪除了未使用的<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;
}
解決方案2
0 2014-05-29 17:40:07
而不是使用border-width，而是使用包裝圖像的相冊類的width和height。
.album {
width:300px;
height:200px;
display:inline-block;
border : 2px #78c9a9 solid;
}
解決方案3
0 2014-05-29 17:46:09
如果您使用負 margin讀relative定位，則會減小img使用的區域。 當使用relative + coordonate時，img使用的空間保持不變，您只能在其他位置看到它。 DEMO
W3C WIKI的一些信息
對於img（inline-boxe），您可以使用vertical-align而不是vertical coordonates： DEMO
Position:relative仍然可用於觸發z-index屬性。
.img1{
border-width:4px;
border-style:solid;
}
.img2 {
position:relative;
margin-left: -90px;
vertical-align:-5px;
z-index:-1;
border-width:4px;
border-style:solid;
}
.img3{
position:relative;
margin-left: -90px;
vertical-align:-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;
}
解決方案4
0 2014-05-29 18:17:48
HTML：
<div class="album">
<div class="imgAlbum"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-fox_679_600x450.jpg" /></div>
<div class="imgAlbum"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-fox_679_600x450.jpg" /></div>
<div class="imgAlbum"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-fox_679_600x450.jpg" /></div>
</div>
CSS：
* {
box-sizing: border-box /* so that borders don't affect our box measurements */
}
.album {
border: 2px solid #78c9a9;
display: inline-block;
}
.imgAlbum {
display: inline-block;
height: 7rem; /* common size */
width: 10rem; /* for all images */
position: relative; /* for z-index mostly */
margin-left: -9rem; /* offset for each child */
vertical-align: top;
}
.imgAlbum:nth-of-type(1) { /* first image shoud not be offset */
margin-left: 0;
}
.imgAlbum:nth-of-type(2) {
margin-top: 1rem;
z-index: -1;
}
.imgAlbum:nth-of-type(3) {
margin-top: 2rem;
z-index: -2;
}
.imgAlbum img {
width: 100%; height: 100%; /* scale images to .imgAlbum size */
border: 3px solid black;
}
我怎樣才能讓我的 css 邊框一直環繞我的 html 代碼？
[英]How can I get my css border to wrap all the way around my html code?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.