Question

我正在试图找出如何使边框恰好适合一组图像。正如您在我发布的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;
}

提前致谢！

Answer 1

CSS / HTML中存在一些错误。我纠正了它们并漂浮了图像，以便边界完全掠过它们。我还删除了未使用的<span>标记。

<强> DEMO

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

Answer 2

而不是使用包装图像的相册类的边框宽度使用宽度和高度。

.album {
    width:300px;
    height:200px;
    display:inline-block;
    border : 2px #78c9a9 solid;
}

Answer 3

如果您使用否定 margin插入relative排名，则img使用的区域会减少。当你使用relative + coordonate时，img使用的空间保持不变，你只能在另一个位置看到它。 DEMO

W3C WIKI

上的一些信息

对于img（内联框），您可以使用vertical-align代替垂直协调： 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;
}

Answer 4

<强> JSFiddle example using margins

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

如何围绕一组图片边框包裹？

4 个答案: