У меня есть изображение на моем веб-сайте, которое определяется с помощью следующего CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Из-за поплавка изображение, очевидно, находится справа от содержимого. Верхний край заставляет изображение сидеть прямо под самым низким элементом висячего содержимого. Это выглядит нормально, но я бы предпочел, чтобы изображение было как можно ниже в окне браузера, чтобы немного разорвать содержимое. Я видел несколько примеров, которые используют фиксированное позиционирование для достижения этого, и это будет работать, однако мой контент имеет максимальную и минимальную ширину 960 пикселей; используя фиксированное положение
bottom: 0;
right: 0;
заставляет изображение удаляться далеко за пределы содержимого до края окна браузера. Можно ли подтолкнуть изображение к нижней части окна браузера, сохранив
float: right;
позиционирование? Я бы предпочел не использовать JavaScript или jQuery, но это вариант, я полагаю. Заранее спасибо.
Следующие могут быть близки к тому, что вам нужно.
Предполагая, что ваш макет страницы смутно выглядит следующим HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
примените следующий CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/6Xnxj/
Если вы не знаете ширину изображения (или вы не хотите его указывать), создайте обертку, которая соответствует ширине родительского элемента, и примените position: fixed
на ней.
Затем изображение может быть либо плавающим, либо выравниваемым по тексту справа в пределах фиксированного блока.
Затем фиксированный блок можно расположить влево и снизу и использовать левый край, чтобы сохранить его в центре.
Новый ответ:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
С CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Правильно ли это в этом JSFiddle: http://jsfiddle.net/WYX7H/1/
position: fixed
всегда относятся к порту просмотра, а не к родительскому элементу.