Как я могу подтолкнуть изображение, которое всплывает прямо в нижней части окна браузера?

0

У меня есть изображение на моем веб-сайте, которое определяется с помощью следующего 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, но это вариант, я полагаю. Заранее спасибо.

  • 0
    Таким образом, вы хотите, чтобы нижний край изображения находился внизу порта просмотра, а правый край изображения совпадал с правым краем веб-страницы (которая имеет ширину 960 пикселей и по центру (?))?
  • 0
    Добавление некоторого HTML поможет ...
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

Следующие могут быть близки к тому, что вам нужно.

Предполагая, что ваш макет страницы смутно выглядит следующим 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 на ней.

Затем изображение может быть либо плавающим, либо выравниваемым по тексту справа в пределах фиксированного блока.

Затем фиксированный блок можно расположить влево и снизу и использовать левый край, чтобы сохранить его в центре.

Поделиться
  • 1
    Это было очень простое решение, спасибо!
1

Новый ответ:

<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/

Поделиться
  • 0
    Это не сработает, поля смещения для position: fixed всегда относятся к порту просмотра, а не к родительскому элементу.
  • 0
    Будь я проклят, ты прав. Как насчет этого для решения: jsfiddle.net/WYX7H/1
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню