Моя проблема следующая. Когда я изменяю размер окна браузера, среднее изображение падает ниже 2 других, которые находятся рядом с ним.
HTML: HTML-код
CSS:
.content {
padding-top:50px;
text-align: center;
}
.samp{
float: left;
width: 188px;
height: 356px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
float: left;
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
float: right;
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}
Есть 3 изображения, которые я просто хочу, чтобы они остались в одном месте, которое находится в средней области, и измените размер с помощью браузера.
Не используйте float, просто используйте width:33.3%
, а height:auto
Пример:
Вы можете сделать что-то по линиям relative
и absolute
позиционирования и блокировать с процентной шириной.
Результат: http://jsfiddle.net/3mAh3/2/
Я дал все это оболочку (класс .collection
) и стилизовал все div
используя этот класс, может изменить его размер до практически любого, и он также будет хорошо перекрываться благодаря z-index
HTML
<div class="content">
<div class="collection">
<div class="samp">
<a href="index.html"><img src="http://therealmgaming.com/images/samp.png" /></a>
</div>
<div class="multiv">
<a href="index.html"><img src="http://therealmgaming.com/images/multiv.png" /></a>
</div>
<div class="minecraft">
<a href="index.html"><img src="http://therealmgaming.com/images/minecraft.png" /></a>
</div>
</div>
</div>
CSS:
.content {
padding-top: 50px;
text-align: center;
}
.collection {
position: relative;
width: 100%;
}
.collection div {
position: absolute;
width: 33%;
}
.multiv {
top: 50px;
left: 33%;
z-index: 2;
}
.samp {
left: 0;
z-index: 1;
}
.minecraft {
top: 30px;
right: 0;
z-index: 1;
}
Вы можете безопасно удалить .collection
и добавить стили к .content
зависимости от другого содержимого в .content
, но тогда не забудьте изменить .collection div
.content div
на .content div
.
Пример: http://jsfiddle.net/3mAh3/4/
Или лучше: http://jsfiddle.net/3mAh3/5/
измените свой код с помощью этого, бра...
.content {
padding-top:50px;
text-align: center;
white-space: nowrap;
}
.samp, .minecraft, .multiv{
vertical-align: top;
display: inline-block;
}
.samp{
width: 247px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}
это даст вам сплошную обертку без сдвига, и вы можете настроить ее оттуда: F