Как разместить два слоя с заданной шириной рядом по горизонтали?
Разместить рядом по горизонтали два блочных элемента фиксированной ширины.
Решение
Слой, создаваемый через тег <div> , является блочным элементом веб-страницы. Это означает, что по ширине слой занимает все доступное пространство и всегда начинается с новой строки. Поэтому ограничение ширины слоев никак не приведет к тому, что блоки станут располагаться рядом. Для нашей цели следует воспользоваться стилевым свойством float со значением left . Это свойство превращает блочный элемент в плавающий, что в свою очередь приводит к выравниванию слоя по левому краю и его обтеканию другими элементами по правому краю. На деле же слои при подобной манипуляции выстраиваются не друг под другом как обычно, а рядом по горизонтали. Но только в том случае, когда ширина слоев задана через свойство width , как показано в примере 1.
Пример 1. Слои заданной ширины
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Слои, располагающиеся по горизонтали с помощью float
Данный пример работает только для слоев, у которых ширина задана явно в процентах или пикселах через свойство width . Чтобы обтекание не распространялось дальше на последующие элементы, необходимо применить свойство clear , оно отменяет действие float . В примере для этой цели создается «пустой» элемент <div >.
При уменьшении размеров окна браузера до определенной величины, слои сверстанные по указанной методике перестают располагаться по горизонтали и «перескакивают» вниз друг под друга (рис. 2). Чтобы этого не происходило, воспользуйтесь стилевым свойством min-width .
Доступно про float: left и как равномерно разместить блоки div на CSS
Ранее разметка страниц осуществлялась с помощью таблиц.
Роль свойства float возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right, left, но не center.
- ПУНКТ
- ПУНКТ
- ПУНКТ
- ПУНКТ
- ПУНКТ
- ПУНКТ
это HEADER h3
Если ему задать свойство display: inline;, то мы увидим, что изменилась не только ширина, но и расстояние над и под элементом:
это HEADER h3
Но если я хочу разместить элемент справа и добавлю на этот раз text-align:right;, то мы получим:
это HEADER h3
И совсем иначе, если float: right;. Обратите внимание, что расстояние над и под элементом остались неизменными:
это HEADER h3
А как поведут себя элементы, находящиеся рядом с заголовком?
Верхний текст остаётся неизменным, поскольку плавающий элемент не может располагаться выше строки, в которой он создан.
это HEADER h3
А вот красный текст находится под заголовком и он будет его обтекать, не имея при этом никаких дополнительных стилей. И только высота h3 будет преодолена, страница вернётся к естественному порядку.
А Б В Г Несколько плавающих элементов будут соблюдать последовательность своего расположения.
<p><span style=»float: left;»>А</span><span style=»float: right;»>Б</span><span style=»float: left;»>В</span><span style=»float: right;»>Г</span>текст. </p>
А выравнивание производится по самому нижнему краю тех букв, которые находятся на одной стороне.
А Б В Г Если мы ходим, чтобы обтекание элемента было прекращено с определённого момента (отсюда), применяется свойство clear. Его мы можем добавить в пустой тег <div style=»clear:both;»></div>
, где border-spacing определяет горизонтальное и вертикальное расстояние между границами ячеек.
Теперь видно каким образом строится галерея изображений. Код картинок, надеюсь, никто не позабыл.
И последнее, что хочется показать — ситуацию, когда нужно достичь обтекания изображения с двух сторон. Собственно говоря картинка соответствует моему настроению, когда мне всё же удалось добиться этого эффекта.
#imagen-center
18 комментариев:
Вячеслав Умница! Спасибо! 🙂 Анонимный Спасибо! Очень сильно выручил 🙂 NMitra Рада помочь 🙂 Анонимный Огромное спасибо. Выручили просто нереально))) Александр Отлично, спс! NMitra На здоровье! Анонимный в мемориз Дмитрий Копий Респект и уважуха автору! NMitra Приятно слышать))) Ярослав Легко читается, хорошо воспринимается. Сейчас как раз пытаюсь выстроить блоки в ряд. Спасибо за Ваш труд! NMitra Благодарю за рецензию! Игорь Вертепа Прочитал Вашь пост и нашел решение своего вопроса, хотел написать автору: "Красавчик" — чем похвалить. Но в комментах вовремя заметил, что пост писала девушка, что в двойне приятно. Очень славно, особенно с обтеканием картинки по центру, нам преподаватель, говорил, что такого нельзя сделать средствами CSS. Конечно он приувеличил и мы видим это решение собственными глазами. Респет, уважаю таких девченок, которые что-то из себя представляют, а не надеются, что их красота спасет мир. 😉 Игорь Вертепа Жаль конечно эти решения не тянут для старых ИЕ, а то им цены бы не было. Но Все равно респект. NMitra Спасибо, Игорь, приятно слышать :))) Анонимный добрый день.
Подскажите пожалуйста, как реализовать вывод изображений как на этой странице
bersoantik.com/catalog/
Нужно чтобы все изображения выравнивались только по столбцам — по 3 в строке, но в строке чтобы если одно меньше, одно больше по высоте, то отступы между изображениями по вертикали были одинаковые, то есть как-будто какой-то небольшой хаос.
Спасибо за помощь. NMitra Добрый день. Посмотрите тут http://shpargalkablog.ru/2012/02/css-kolonki.html
<style type="text/css">
.kolonka <
-moz-columns: 3;
-webkit-columns: 3;
-moz-column-gap: 0;
-webkit-column-gap: 0;
line-height: 0;
columns: 3;
column-gap: 0;
text-align: center;
>
.kolonka img <
width: 98% !important;
height: auto !important;
padding-bottom: 2%;
>
</style>
Как поставить 2 блока рядом css
Как поставить два блока рядом
div же с новой строки начинает всегда. Как поставить два блока рядом? На каждый вопрос.
Два рядом стоящих блока div- CSS
Из бд вывожу картинку, а слева от нее блок div. Эта картинка выносится автоматически на передний.