Я пытаюсь сделать так, чтобы три изображения отображались равномерно и оставались равномерно при изменении размера браузера.В данный момент изображения просто накапливаются одно над другим, когда вы уменьшаете окно.
Я бы хотел, чтобы изображения прекратились, как только они попадут на другое изображение.Я думаю, что добираюсь туда, но я немного застрял.
Может ли кто-нибудь проверить мой код и посмотреть, где я ошибаюсь, или я делаю что-то не так в моем макете 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;
}