Question

我正在尝试均匀显示三张图片，并在调整浏览器大小时保持均匀放置。当你使窗户变小时，图像只会堆叠在另一个上面。

我希望图像在点击其他图像后停止。我想我到了那里但是有点卡住了。

有人可以查看我的代码，看看我哪里出错或者我的HTML / CSS布局有什么问题吗？

感谢您的时间。

这是我的HTML：

<title>Welcome</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<div id="outer">
<div id="header">

</div>


<div class="wrapper">

 <img class="one" src="images/music.jpg" alt="My Music" title="Music" />

 <img class="two" src="images/photos.jpg" alt="My Photography" title="Photography" />

 <img class="three" src="images/about.jpg" alt="About me" title="About" />


</div>

<div id="footer">
</div>
</div>
</body>
</html>




CSS:

body {
background-image:url('images/bgcolour.jpg');
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 100%;
background-color:#000000;

}
div#header {
background-position: center top;
height: 30px;   
margin: 0px;
text-align: center;
}



.wrapper {
padding:10px;  
position:relative;


}

img {
width:250px;
height:250px;   
display:block;
}
.one {
 position:absolute;
top:10px;
left:5%;
}
.two
{
 position:absolute;
    top:10px;
    left:40%;
}
.three {
    position:absolute;
top:10px;
    right:5%;
}





div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;

}


div#footer {

background-image:url('images/sig.jpg');
background-repeat: no-repeat;
background-position: right bottom;
height: 50px;   
margin: 0px;
text-align: center;


}

Answer 1

尝试this fiddle中的解决方案。

有关说明：请参阅this answer。

Answer 2

在img上添加填充

img {padding:5px;}

然后在包装类中添加最小宽度。

因此如果所有图像都是250像素，则有3张图像距离蝙蝠750px。然后你为每个图像添加一个5px的填充，增加30px的宽度，并将我们放在780px。

所以...

.wrapper {min-width:800px;text-align:center;}

Answer 3

为包装器添加最小宽度，以确保图像不会向下移动到下一行。

.wrapper {
  padding:10px;  
  position:relative;
  min-width: 750px;
}

然后将绝对定位的图像移动到所需的位置：

img {
  width:250px;
  height:250px;   
  display:block;
  position: absolute;
}
.one {
  left: 0%;
}    
.two {
  left: 50%;
  margin-left: -125px;
}
.three {
  right: 0%;
}

请注意第二张图片上的margin-left。该数字是图像宽度的一半。因此，您基本上将图像置于50％，然后将其向后移动一半宽度。

此外，如果您不希望.one和.three位于边缘，则可以分别使用left: 10px和right: 10px。

小提琴：http://jsfiddle.net/neilheinrich/ADUg2/

如何在浏览器窗口较小的情况下均匀分隔三个图像并避免它们重叠？

3 个答案: