我试图让三个图像均匀显示并在调整浏览器大小时保持均匀放置。目前，当您缩小窗口时，图像只是一个叠一个。
我希望图像在碰到另一张图像时停止。我想我到了那里，但有点卡住了。
有人可以检查我的代码，看看我哪里出错了，或者我的 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;
}
最佳答案
尝试 this fiddle 中的解决方案.
解释:见this answer .
关于html - 如何在浏览器窗口较小的情况下均匀间隔三张图片，并避免它们重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7922685/