У меня есть текстовый контейнер с пунктами и заголовками. В нижней части страницы я хочу плавать изображение в правой части страницы, а текст обтекает изображение. Нижней части изображения должны быть на одном уровне с нижней части последнего абзаца.
Ширина страницы может изменяться (отзывчивый), но размеры изображения не изменяются. Можно ли сделать это в HTML и CSS (CSS3-это нормально)? Если нет, можно ли это сделать с минимальным количеством кода JavaScript?
Здесь'ы схематичный пример того, что я хочу сделать:
HTML-код в настоящее время выглядит что-то вроде этого, но он может быть изменен, если это необходимо. Я Дон'т волнует, где в документе находится изображение. Вместо этого, используя фоновые изображения было бы слишком хорошо.
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
Когда я настроил поплавок: право на изображение, оно плывет в право, но я не могу получить его, чтобы выровнять в нижней части страницы. Предложения?
Редактировать: ближайший я получил это Этот... :-)
Создать распорного элемента с поплавок: справа
и высота
, равной высоте содержимого минус высота изображения. Затем используйте поплавок: справаи
понятно: права на изображения:
<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>
.spacer {
height: calc(100% - 200px);
width: 0px;
float: right;
}
.bottomRight {
height: 200px;
float: right;
clear: right;
}
Демо использует фиксированные размеры в элемент-контейнер. Так что редко бывает реалистичной случае, вероятно, имеет больше смысла, чтобы использовать JavaScript для изменения размера спейсера. Вызвать эту функцию, передав ссылку на элемент распорки, когда документ уже готов и в окно.событие onresize`.
function sizeSpacer(spacer) {
spacer.style.height = 0;
var container = spacer.parentNode;
var img = spacer.nextElementSibling || spacer.nextSibling;
var lastContentNode = container.children[container.children.length - 1];
var h = Math.max(0, container.clientHeight - img.clientHeight);
spacer.style.height = h + "px";
while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
spacer.style.height = --h + "px";
}
}
Эта функция работает ([посмотреть демо](
)), и могут быть переработаны для jQuery или вашей библиотеке выбор. Это's не предназначены для plug-в качество кода, но служит для иллюстрации концепции.[jsfiddle.net/n5RPV/9](
)Редактировать: я создал jQuery плагин версия (гитхаб | [jsFiddle демо](http://jsfiddle.net/n5RPV/10/)), который поддерживает плавающие внизу слева или справа внизу. Он также поддерживает указанием, какой элемент, чтобы выровнять дно.
<суб>кстати, я вовсе'т пытайся поддерживать ИЕ7.</суб>
Я думаю, что будущее путь, как решать эту проблему будут с исключения CSS.
исключения CSS расширить понятие содержание ранее оберточная общества с поплавками. ... Расположение элементов, их внутреннее содержимое в их содержании, и обернуть вокруг Зоны отчуждения в контексте связанных с ними оберточная (--выдержки из спец)
Этой статье также объясняет исключения
...веб-авторы могут переносить текст так, что он полностью окружает элементы, что позволит избежать традиционных ограничений поплавков. вместо того, чтобы ограничить элементы, плавающие либо влево или вправо В зависимости от их расположения в потоке документов, исключения CSS может быть расположенный на указанном расстоянии от верхней, нижней, левой или > у правого края содержащего блока, в то время как оставшаяся часть документооборот.
По иронии судьбы, на сегодняшний день это работает только в IE10 (ищите обруч-поток:как здесь)
Это то, что код выглядит как:
<div class="container">
<div class="exclusion">
Exclusion positioned at bottom right hand side of text.
</div>
<div class="dummy_text">
<p>text here</p>
</div>
</div>
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
right:0;
bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */
width: 150px;
height: 100px;
background: url(http://placehold.it/150x100) no-repeat;
}
Так что как видите - даже если исключение является абсолютным позиционированием - она все равно действует как поплавок в данном случае: нижний поплавок справа.
По поводу поддержки браузеров:
Проверьте этом сайте, которая показывает, какие свойства поддерживаются браузеры (на сегодняшний день: только в IE10+ поддержка обертывание-поток:в обе` )
ЗЫ: последние обновления, касающиеся исключения CSS (и других модулей simlar как CSS областей и форм CSS) может быть найден в Adobe команда веб-блог-платформа
С немного JavaScript и CSS, я делал так:
Один простой всплывающие()` функция.
Идея вдохновила: http://www.csstextwrap.com/
Возможное решение в CSS: (протестирован только в Chrome)
Похоже, это может сработать с помощью CSS3'ы свойства Flex коробка и сочетание фона изображения, свойства. Я был в состоянии получить его довольно близко, используя только CSS. (Это работает, но нуждается в небольшой доработке) также, это не может быть идеальным, потому что я сделал, чтобы менять разметку немного, чтобы сделать эту работу. Но его, вероятно, стоит выстрел, если вы ищете чистый раствор для CSS.
Вот демо ->
Новую разметку: (не сильно отличается)
<section >
<h2>Some Heading:</h2>
<p>...</p>
<p class="last">
<span class="image"></span>
</p>
</section>
Усс:
.last {
display:inline-flex;
flex-direction:row;
}
.image {
padding:5px 0 0 5px;
width:100%;
background-image:url("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png");
background-size:100%;
background-repeat:no-repeat;
background-position:bottom right;
}
Ресурсы:
Я работал на основе jQuery решение &ампер;mdash; не, наверное, не так элегантно, как один написал gilly3 правда ;) и это's также медленнее и немного раздутый...
Мой фокус в том, чтобы добавить два в `<див> в разделе, который плыл к левому и скрытые ширина шириной 0. Одним из дел, назначенных духа элементом, который будет иметь такой же размер, как изображения, будет позиционироваться Ниже Еще один div, в котором будет обозначена высота проставки. Скрипт использует цикл while, чтобы установить, если элемент призрак достиг нижней части родительского элемента секции. Если этого не произошло, он будет увеличивать высоту высота проставки на 1, до тех пор, пока условие выполняется.
Разметки я использовал это как следует. Я'м, используя данные-внизу-изображение атрибута HTML5 С
, чтобы определить разделы, которые у вас есть изображения, необходимо плыть на дно. Конечно, это является необязательным, в зависимости от того, как вы хотите, чтобы выбрать правильный элемент раздела.
<section id="c1" data-bottom-image>
<h2>...</h2>
<p>...</p>
<img src="http://placehold.it/250x100" />
</section>
И jQuery скрипт:
$(function () {
$("section > img:last-child").each(function () {
// Offset image based on the bottom and right padding of parent
var $par = $(this).parent();
$(this).css({
bottom: $par.css('padding-bottom'),
right: $par.css('padding-right')
});
});
// Function: adjust height of height-spacer, pixel by pixel
function adjustHeightSpacer($par, $hs, $is) {
// Stretch height spacer
$hs.height(0);
$hs.css({
height: $par.find("img").position().top - parseInt($par.css('padding-top'))
});
// Adjust height spacer
while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("+=1");
}
while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("-=1");
}
};
$("section[data-bottom-image]").each(function() {
// Append two spacers:
$(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />')
var $hs = $(this).find(".height-spacer"),
$is = $(this).find(".image-spacer");
// Adjust image spacer dimension
$is.css({
height: $(this).find("img").height(),
width: $(this).find("img").width()
});
// Adjust height spacer
adjustHeightSpacer($(this), $hs, $is);
});
$(window).resize($.debounce(250,function() {
$("section[data-bottom-image]").each(function() {
// Adjust height spacer
adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer"));
});
}));
});
А вот рабочая скрипку:
Только CSS решение.
Используя медиа-запросы можно выполнить этот макет.
HTML-код
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
<img src="..." class="show-medium">
...
<img src="..." class="show-small">
</section>
УСБ
html, body {
height: 100%;
width: 100%;
}
img {
display: none;
float: right;
clear: right;
}
@media (max-width: Xpx), (max-height: Xpx) {
/* show img for small screens */
.show-small { display:block; }
}
@media (min-width: Xpx) and (max-width: Xpx) and (min-height:Xpx) and (max-height: Xpx) {
/* show img for medium screens */
.show-medium { display:block; }
}
@media (min-width: Xpx) and (min-height: Xpx) {
/* show img as body background for large screens */
body {
background: url("http://placehold.it/200x300") no-repeat fixed right bottom transparent;
}
}
Он играет хорошо на разных разрешениях экрана. [Посмотреть демо][1].
Надо играть/настройки CSS запросы средств массовой информации, а также положение изображения в пределах разметки для того, чтобы заставить его работать.
CSS запросы средств массовой информации поддерживается в Firefox 3.5+, оперу 7 версии, Safari 3+, Chrome и в IE9+. Для более старых версий, т. е. можно использовать это исправление: http://code.google.com/p/css3-mediaqueries-js/
Здесь'ы простое решение с помощью jQuery:
<section class="flagpole">
<div class="pole"></div>
<img class="flag" src="..." />
<p>Paragraphs...</p>
</section>
.pole, .flag {
float: right;
clear: right;
}
.pole {
width: 0.1px
}
function setFlag() {
$('section.flagpole').each(function () {
var poleHeight = $(this).height() - $(this).find('.flag').height();
$(this).find('.pole').height(poleHeight);
});
}
setFlag();
$(window).on('resize', function () {
setFlag();
});
Чтобы развеять любые опасения по поводу плагиата, это решение базируется на еще один подобный ответ я дал некоторое время назад.
используйте это :
<section class="post">
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
<style>
.post img {float:right;margin-top:80%}
</style>
изменить 80% чтобы получить лучший результат.
Удачи.