у меня сейчас так выглядит
@bemulima, смысл тогда .row называть? .row — это ряд, строка. Они у вас наверняка в контейнер оборачиваются, которым можно clearfix сделать.
3 мар 2014 в 16:11
Не понятно чего хочет добиться автор.
3 мар 2014 в 16:22
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Стили
.row + *::before
Отслеживать
ответ дан 3 мар 2014 в 16:01
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
В этому случае можно было и проще:
img < margin: 0 10px 10px 0; vertical-align: top; >
3 мар 2014 в 16:16
@FlamesoFF, мне нужно было показать работу свойства. Очевидно, что пример только для этого. Зачем его оптимизировать, убирая демонстрацию?
3 мар 2014 в 16:22
@VenZell, автор вообще хотел добиться другого.
3 мар 2014 в 16:23
@FlamesoFF, jsfiddle.net/bemulima/kx5m3/5 хочу как здесь только без
3 мар 2014 в 16:31
@bemulima, готово.
3 мар 2014 в 16:44
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как в css отменить обтекание (float)?
Всех приветствую. На очереди очередная статья на тему верстки и в этот раз я рассмотрю вопрос, как в css отменить обтекание. Такая проблема возникает перед разработчиком очень часто и решить ее можно как минимум несколькими способами. Сегодня я покажу 2.
Первый способ и пример
Начнем с примера. Будет один общий блок-контейнер, а в нем будут лежать 2 блока — оба плавающие. Одному задан float: left , второму — float: right . Вот html разметка:
#wrap <
width: 600px;
background: yellow;
margin: 0 auto;
>
.left, .right <
background: #333;
width: 200px;
padding: 20px;
margin: 10px;
>
.left <
float: left;
>
.right <
float: right;
>
Казалось бы, мы должны увидеть в большом желтом блоке 2 серых. Но что происходит на самом деле? Вот что:
По идее мы должны увидеть серые блоке на желтом фоне, ведь они внутри блока. Но на деле стилей блока-контейнера не видно. Почему? Дело в том, что поскольку в нашем блоке только плавающие блоки, а их нормальный блок как бы не учитывает. Он схлопывается до нулевой высоты. Как решить проблему? Первый способ выглядит так:
- Добавляем новый блок с классом clr (сокращенно от clearfix ).
- В стилях пишем для него:
.clr <
clear: both;
>
Clear: both — это как раз то правило, которое отменяет обтекание. Таким образом в контейнере уже появится как минимум 1 нормальный блок, который будет расположен ниже плавающих и у него будет это правило. Все, проблема решена:
Второй способ
Собственно, в разных блогах я читал о многих способах отмены обтекания, в том числе и с использованием псевдоэлемента. Но самый простой, на мой взгляд, способ, который требует лишь одной строки кода, реализовывается так:
Добавляете блоку-контейнеру (в моем случае wrap ) свойство overflow: hidden .
#wrap <
overflow: hidden;
>
Все, результат аналогичен, но сам способ намного проще.
Итог
Собственно, можно было бы тут писать еще про 7 способов отмены обтекания, но зачем? Берите любой из этих и используйте. Успехов в сайтостроении.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.
Еще материалы по HTML
Бесплатный курс по HTML
CSS: Обтекание элементов
Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.
Плавающие элементы
Свойство float позволяет сделать элемент плавающим, смещая его в левую или правую сторону, в зависимости от того, какое значение установлено:
- left — смещает элемент влево
- right — смещает элемент вправо
- none — отменяет плавание элемента
Единственным требованием для любого плавающего элемента является наличие фиксированной ширины (width).
Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен «плавать», всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.
Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он «плавает» на странице.
Поскольку плавающий элемент был исключён из общего потока, то остальные блочные элементы, расположенные в коде после него, загружаются на страницу так, будто этого элемента там и не было. Обратите внимание, что блочные элементы располагаются под плавающим элементом, это происходит потому, что плавающий элемент больше не является частью общего потока.
Если вы внимательно посмотрите на рисунок, то увидите, что в отличие от блочных, при размещении строчных элементов или простого текста, расположенного внутри блочного элемента, учитываются границы плавающего элемента, поэтому строчные элементы и текст обтекают его.
Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
Название документа p < width: 250px; >imgС помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку по правой и нижней стороне.
Для создания пустого пространства между картинкой и текстом, обтекающим ее, нужно добавить к картинке внешние отступы. Поскольку картинка смещена к левой границе родительского элемента, достаточно будет добавить внешние отступы только справа и снизу, чтобы слегка отодвинуть от нее текст:
Отмена обтекания
Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear, которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий.
Для CSS свойства clear можно установить одно из значений:
- left — плавающие элементы запрещены с левой стороны.
- right — плавающие элементы запрещены с правой стороны.
- both — плавающие элементы запрещены с обеих сторон.
- none — разрешает наличие плавающих элементов с обеих сторон.
Название документа div < width: 400px; >img < float: right; >pС помощью свойства clear установлено, что плавающие элементы запрещены с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку по левому краю.
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Как отменить обтекание текстом
Чтобы отменить обтекание заголовка, необходимо добавить следующий стиль:
Таким образом наша строчка будет выглядеть так:
Нам будет приятно
Еще интересное в блоге
Относительные размеры элементов в EM
Popover со скруглёнными углами
Загрузка комментариев.
Будем рады работать именно с вами
Политика конфиденциальности персональных данных
- Общие положения.
- Настоящая Политика конфиденциальности персональных данных (далее — Политика) действует в отношении всех персональных данных, которую компания Keengo (далее – Компания), может получить от пользователя (лица, заполнившего форму обратной связи, использующего другие сервисы официального сайта keengo.ru (далее – Сайт)), в частности в ходе: отправки отзывов или вопросов, заказа услуг, участия в рекламных и/или маркетинговых кампаниях или акциях и/или ином взаимодействии (далее – Услуги).
- Заполняя форму обратной связи и нажимая кнопку «Согласен/на», расположенную на странице Сайта, на которой размещена форма обратной связи, а равно указывая свои персональные данные при использовании других сервисов Сайта, пользователь выражает согласие с настоящей Политикой и указанными в ней условиями обработки и передачи его персональных данных. Согласие Пользователя на предоставление, обработку и передачу его Персональных данных Компании в соответствии с Политикой является полным и безусловным.
- Посетителям Сайта следует воздержаться от заполнения формы и/или от использования других сервисов Сайта в случае несогласия (полного или частичного) с Политикой, а равно несогласия предоставить персональные данные.
- Согласие, даваемое пользователем, включает в себя согласие на сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование, занесение в базы данных (в том числе электронные) Компании, передачу внутри Компании другим отделам и подразделениям или поставщику услуг, обязующегося выполнять условия договора о защите персональных данных, в целях рассылки информационных материалов и/или в рекламных целях (в том числе рассылку приглашений на мероприятия, проводимые/организованные Компанией), трансграничную передачу, блокирование, обезличивание, уничтожение персональных данных.
- Согласие, даваемое пользователем, распространяется на следующие персональные данные: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон.
- Срок действия согласия пользователя является неограниченным, однако, пользователь вправе в любой момент отозвать настоящее согласие путём направления письменного уведомления на адрес электронной почты: info@keengo.ru, с пометкой «отзыв согласия на обработку персональных данных».
- В рамках настоящей Политики под персональными данными пользователя понимаются персональные данные, которые пользователь предоставляет о себе самостоятельно при заполнении формы обратной связи на Сайте, при использовании других сервисов Сайта, при регистрации (создании учётной записи) на Сайте или в процессе использования услуг, предоставляемых Компанией. Соответствующая информация явно обозначена, к ней, в частности отнесены: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон. Иная информация предоставляется пользователем на его усмотрение.
- Компания исходит из того, что пользователь представляет достоверные персональные данные, а также, что пользователь имеет право предоставить персональные данные.
- Компания использует средство 1С Битрикс для сбора сведений об использовании Сайта, таких как частота посещения Сайта пользователями, посещенные страницы и сайта, на которых были пользователи до перехода на данный Сайт. 1С Битрикс собирает только IP-адреса, назначенные пользователю в день посещения данного Сайта, но не имя или другие идентификационные сведения.
- 1С Битрикс размещает постоянный cookie-файл в веб-браузере пользователя для идентификации в качестве уникального пользователя при следующем посещении данного Сайта. Этот cookie-файл не может использоваться никем, кроме 1С Битрикс. Сведения, собранные с помощью cookie-файла, будут храниться на серверах, находящихся в Российской Федерации.
- Компания использует сведения, полученные через 1С Битрикс, только для обработки и хранения персональных данных.
- Компания обрабатывает только те персональные данные, которые необходимы для оказания услуг.
- Персональную информацию пользователя Компании может использовать в следующих целях:
- Идентификация стороны в рамках оказания услуги.
- Рассылка рекламных и/или маркетинговых материалов Компании, рассылка приглашений на мероприятия, конференции, выставки, проводимые и/или организуемые Компанией, проведение телемаркетинговых компаний.
- Проведение статистических и иных исследований, на основе обезличенных данных.
- В отношении персональных данных пользователя сохраняется ее конфиденциальность, кроме случаев обработки персональных данных, доступ неограниченного круга лиц к которым предоставлен пользователем либо по его просьбе.
- Компания вправе передать персональную информацию пользователя третьим лицам в следующих случаях:
- Пользователь предоставил свое согласие на такие действия.
- Передача персональных данных организациям, которые оказывают услуги Компании по рассылке рекламных и/или маркетинговых материалов, организации и проведению мероприятий, конференций, выставок, телемаркетингу, обзвону потенциальных клиентов Компании.
- Передача необходима для достижения целей, осуществления и выполнения функций, полномочий и обязанностей, возложенных законодательством Российской Федерации на Компанию.
- Компания принимает необходимые и достаточные организационные и технические меры для защиты персональных данных пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с персональными данными третьих лиц.
- Компания предпринимает разумные меры для поддержания точности и актуальности, имеющихся у Компании персональных данных, а также удаления устаревших и других недостоверных или излишних персональных данных, тем не менее, Пользователь несет ответственность за предоставление достоверных сведений, а также за обновление предоставленных данных в случае каких-либо изменений.
- Пользователь может в любой момент изменить (обновить, дополнить, блокировать, уничтожить) предоставленную им персональную информацию или её часть, а также параметры её конфиденциальности путем обращения в Компанию.
- Пользователь вправе в любой момент отозвать согласие на обработку Компанией персональных данных путём направления письменного уведомления на электронный адрес: info@keengo.ru с пометкой «отзыв согласия на обработку персональных данных», при этом отзыв пользователем согласия на обработку персональных данных влечёт за собой удаление учётной записи пользователя с Сайта и баз данных Компании, а также уничтожение записей, содержащих персональные данные, в системах обработки персональных данных Компании.
- Пользователь имеет право на получение информации, касающейся обработки его персональных данных Компанией.
- Блог
- Блог о CSS
- Как отменить обтекание текстом
Keengo · Web Design & Development
© 2010–2023 Все права защищены