Css обтекание блока: Плавающие элементы | htmlbook.ru

У меня есть встроенный блок внутри div, который имеет некоторое текстовое содержимое. Текстовое содержимое переполняется, если дисплей настроен на встроенный… http://jsfiddle.net/76d9twoy / HTML…

Вот пример кода <div id=field_one> <p> ndustry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled…

Я пытаюсь заставить текст обернуться вокруг div в моем XHTML. Мой XHTML выглядит так…. <div id=cont-content> <p>content</p> <p>more content</p> <div…

Я немного поискал решение для обертывания текста вокруг изображения и наткнулся на JQSlickWrap. jQuery плагин для обертывания текста вокруг изображений + поддержка IE6 Но это не работает в IE. Есть…

Я использую emacs с cdlatex-mode для редактирования файлов LaTeX. Я хотел бы знать, как вставить среду LaTeX вокруг блока текста, который уже написан, так что \begin{} идет перед выделенным текстом,…

для этого сайта, который я строю, мне нужно отобразить контент определенным образом, у меня есть миниатюра, два скриншота и блок текста около 500 слов. Мне нужно, чтобы текст был обернут вокруг…

Я использую представление списка, чтобы показать изображение и текст, который я хочу показать, как выше изображения, может ли кто-нибудь предложить мне, как обернуть текст вокруг изображения с out…

Я пытаюсь создать небольшой сетчатый макет. Однако при использовании поплавков текст на самом деле больше, чем плавающий div, и обертывается вокруг него. Есть ли способ остановить обтекание текста…

В настоящее время мне трудно найти пример того, что я специально ищу. Я пытаюсь создать круг вокруг моего текста, используя CSS. Я нашел примеры круга с текстом внутри, но в данном случае я пытаюсь…

Float — Изучение веб-разработки | MDN

Первоначально используемое для «обтекания» картинок текстом, свойство float стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.

Свойство float вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.

Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как drop-caps (буквица).

Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике).

В этой статье мы сконцентрируемся только на надлежащем использовании floats.

Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый index.html файл на вашем компьютере, заполнив его простым шаблоном HTML, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.

Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:

<h2>Simple float example</h2>

<div>Float</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci.  Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>

<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

А теперь примените следующий CSS для вашего HTML (используя элемент <style> или <link> на отдельный файл .css — на ваше усмотрение):

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:

Итак, давайте подумаем над тем, как работает float — элемент с установленным float (элемент <div> в данном случае) изымается из нормального потока документа и крепится с левой стороны от родительского контейнера (элемент <body> в данном случае). Любой контент, который следует ниже за обтекаемым элементом в макете при нормальном потоке теперь будет оборачивать его вокруг, заполняя пространство справа от него начиная на той же высоте что и вершина обтекаемого элемента. Там он остановится.

Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на right и замените margin-right на margin-left в последнем наборе правил, чтобы увидеть каков результат.

В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.

Добавьте класс special к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.

.special {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

Чтобы эффект был лучше виден, измените margin-right обтекаемого объекта на margin, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.

Линейные блоки нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.

Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства clear.

Добавьте класс cleared ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:

.cleared {
  clear: left;
}

Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство clear принимает следующие значения:

• left: очищает объекты, обтекаемые слева.
• right: очищает объекты, обтекаемые справа.
• both: очищает любые обтекаемые объекты, слева или справа.

Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в <div> с классом wrapper.

<div>
  <div>Float</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>

В вашем CSS добавьте следующее правило для класса .wrapper и обновите страницу:

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

В добавок удалите класс .cleared:

.cleared {
    clear: left;
}

Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.

И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.

Clearfix hack

Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.

Добавьте следующий CSS в наш пример:

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML элемент такой как <div> ниже объекта и установили clear: both.

Использование overflow

Альтернативный метод — это задать свойство overflow для обёртки (wrapper) на значение отличное от visible.

Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте overflow: auto к правилу для обёртки. Блок снова должен быть очищен.

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

Этот пример работает путём создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.

display: flow-root

Современный способ решения этой проблемы — это использование значения flow-root свойства display. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите overflow: auto из вашего правила .wrapper и добавьте display: flow-root. Если предположить, что у вас поддерживающий браузер, блок будет очищаться.

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. Проверка ваших навыков: Floats.

Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об устаревших методах макета устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.

Как убрать обтекание текстом картинки?

Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель – предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.

Постановка задачи

Написание какой-либо статьи для вашего информационного ресурса или блога не редко будет сопровождаться вкраплением по ходу изложения текста картинок. Так как поисковый робот всегда уважал наличие картинок на сайте, да и пользователя больше порадует текст с яркими изображениями. Отсюда вытекает потребность в установке особого способа форматирования, который обеспечит красивое взаимодействие текста и картинки.

Рассмотрим тот случай, когда обтекание текстом не требуется. Причем предлагаю универсальный вариант – при отсутствии картинки текст растягивается на всю ширину блока (не все же Ваши статьи будут сопровождаться иллюстрациями). Ширина блока с текстом строго не фиксирована. Ниже показано, как должен будет выглядеть наш блок.

Правильное решение

Для реализации поставленной задачи создаем два блока: один для картинки, второй – для текста. С учетом того, что под картинкой может располагаться еще какие-либо элементы, для картинки мы создаем отдельный контейнер, в противном случае этого не требуется, можно просто присвоить тегу с изображением необходимый класс.

HTML

<div>
		<img src="img.png" alt=""/>
	</div>
	<div>
		Текстовый блок
	</div>

CSS

.image {
		float: left; /*обтекание */
		margin:10px; /*внешний отступ для красоты */
		display:inline; /* для IE6, чтоб отступ слева не удвоился */
	}

Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:

Вполне логично будет предложить присвоить и тексту свойства плавающего объекта. При не установленных значениях ширин объекта получим такую картину

Чтобы избежать такого эффекта, просто нужно указать значения ширины текстового блока, но это не соответствует условиям нашей задачи.

Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left. Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!

А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока – необходимо обратиться к свойству overflow со значением hidden. Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).

Таким образом, мы пришли к правильному решению, которое приведет к эффекту, указанному на картинке в подразделе, в котором описывались условия нашей задачи.

CSS

.image {
		float: left; /*обтекание */
		margin:10px; /*внешний отступ для красоты */
		display:inline; /* для IE6, чтоб отступ слева не удвоился */
	}
.text{
	overflow:hidden;
	float:left;
}

Недостатки метода и альтернатива

Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden, есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.

В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell;. Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower

CSS

.img {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.text{
	display:table-cell;
	zoom:1; /* Осторожно! Строка невалидна  */
}

И это решение обладает своими особенностями, которые нужно учитывать при верстке. Если текстовая часть будет достаточно короткой, то следующий блок будет выводится справа от блока с классом text. Чтобы этого избежать необходимо текстовый блок и картинку заключить в отдельный контейнер.

В каких браузерах работает?

Оценок: 5 (средняя 5 из 5)

• 9680 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Обтекание в HTML и CSS

CSS float позволяет делать HTML меню, размещать блоки, выравнивать изображения

Если вы не очень хорошо понимаете как работает обтекание в HTML и CSS (свойство float), то эта заметка поможет сориентироваться. Свойство CSS float часто применяется для расположения двух и более блоков в одну линию. Верхняя часть этих блоков находится на одном уровне, нижняя — в зависимости от высоты блоков. Сами блоки «плывут» влево (float:left) или вправо (float:right). Есть еще значение none, оно отключает обтекание (работу float) для конкретного элемента с float: none

Свойство используется и при выравнивании изображений.

Обтекание картинки текстом

Особенности обтеканий в CSS

«Побочный» эффект возникает, если выравненное по любой стороне изображение имеет большой размер и находится в нижней части блока, в котором выравнивается. При этом  последующие блочные элементы также могут вступить во взаимодействие.

Еще одна особенность — потеря высоты родительским элементом. Когда высота родительского блока определяется содержимым, а внутри есть плавающие элементы, то родительский «забыват» высоту внутренних (они уплыли!). Результатом становится схлопнутый бордюр родительского HTML-элемента

Отмена обтекания в HTML и CSS clear

Избежать выше описанных проблем можно указав за плавающими элементами блочный элемент со CSS-свойством clear. Это свойство отменяет последствия плавания для элементов, которые идут за плавающим. Это может блок div, или другой элемент или псевдоэлемент со значением clear:left (другие значенияclear: right  или clear: both), если мы хотим отменить эффект от элемента плывущего влево.

Отмена обтекания выполняется CSS-свойством clear

Горизонтальное меню

горизонтальное меню

При помощи обтекания можно создать горизонтальное меню. Для этого нужно применить float:left к элементам li. В этом случае элементы принимают горизонтальное положение, остается только вставить ссылки. Это не единственный способ, подобное меню также можно быть создано через идущих подряд нескольких гиперссылок, при помощи свойства display:inline-block или display:table и другими.

Подробней узнать об обтекании в CSS можно узнать на странице документации CSS-float. На той же странице подробно описывается боксовая модель CSS.

Свойство float. Обтекание элементов | w3.org.ua

Float — самое страшное свойство для новичка в HTML. Именно потому, что c float не умеют работать. Float переводится как «всплытие». Из доступных значений этого свойства можно выбрать:

float: left; float: right; float: none; float: inherit;

Давайте посмотрим, что происходит с элементами, когда к ним применяется свойство float:

• Элемент «сплывает» и прижимается к левому (если float: left) или правому (float: right) краю родительского элемента или элемента которому тоже задано значение float
• Если элемент из-за ширины родительского блока не может встать в один ряд с другим элементом, он будет сдвинут вниз до того момента пока ему не хватит места
• Другие блочные элементы для которых значение float не задано ведут себя так, как будто элемента с float нет на странице (элемент «сплыл»). Строки «знают» что элемент всплыл и обтекают его
• Ширина блока, для которого задано значение float — определяется по содержимому.

Рассмотрим пример. Удалите комментарий у свойства float: left внутри CSS. Посмотрите на результат.

See the Pen float by Alex (@Asmodey) on CodePen.

Замените float:left на float: right.

Свойство float удобен для обеспечения обтекания картинок текстом. Рассмотрите пример:

See the Pen float by Alex (@Asmodey) on CodePen.

Добавьте комментарий в строку CSS файла к свойству float: left. Просмотрите как изменится верстка страницы. Замените float: left на float:right.

«Схлопывание» родительского элемента при наличии у вложенных элементов свойства float

Пусть внутрь элемента one помещен элемент two. По-умолчанию, высота one растянется по содержимому. Как только мы к элементу two применим свойство float, он всплывает, и родительский элемент one не будет знать что two существует. Если содержимого у two нет, то его высота равна нулю. Такое поведение называется «схлопывание». Чтобы предотвратить схлопывание родителя ему задают либо свойство min-height — минимальная высота, либо применяют способ: добавляют еще один блок, для которого задают свойство:

<div></div>

Данный блок не виден на странице, но свойство clear:both снимает обтекание элементов и растягивает родителя на высоту содержимого.

Снимите комментарий свойству float:left в CSS. Посмотрите как ведет себя родительский элемент:

See the Pen float by Alex (@Asmodey) on CodePen.

Рассмотрите пример с применением clear: both

See the Pen float: clear both by Alex (@Asmodey) on CodePen.

Итак вы ознакомились с основными свойствами float. Давайте применим знания на практике.

Смотрите статью — как прижать футер к нижней части сайта: 2 простых способа.

CSS — Работа с плавающими элементами

Плавающий элемент — это блочный элемент, у которого установлено CSS свойство float со значением left или right. Располагается плавающий элемент следующим образом: он открепляется от своего текущего места (текущее место — это место, которое занимал бы блочный элемент, если он был бы не плавающим) и располагается по вертикали (верхняя граница плавающего элемента выравнивается по верхней границе текущей строки) и горизонтали (в зависимости от значения свойства float плавающий элемент будет прикрепляться насколько возможно к левому или правому краю родительского элемента). Остальное содержимое, расположенное после плавающего элемента в этом контейнере обтекает этот плавающий элемент с противоположной стороны. Место, которое он занимал бы, если бы не был плавающим, не закрепляется за ним, и его место будет занимать элементы контейнера, расположенные после плавающего элемента. Также необходимо учитывать то, что высота плавающего блока не влияет на высоту блока контейнера, в которую он помещён.

Например: высота контейнера, в который помещён только плавающий блок будет равна 0.

Рассмотрим расположение плавающих блоков на примере. Для начала создадим 3 блока с разным фоном и разместим их в контейнере, который имеет высоту 350px и внутренние отступы с каждой стороны (padding) по 20px. По умолчанию блочные элементы будут занимать всю ширину контейнера, и располагаться один под другим.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Теперь с помощью свойства float изменим 2 блок на плавающий и установим ему ширину равную 120px. Задание ширины для плавающих блоков является обязательным условием. После изменения блочный элемент 3 стал обтекать плавающий блок с противоположной стороны.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Теперь изменим высоту блочного элемента 3 и заметим, что после обтекания плавающего элемента блочный элемент 3 выравнивается по левому краю.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Теперь и 1 блок сделаем плавающим, дополнительно установив ему ширину 120px и высоту 150px. 2 плавающий блок (красный) будет стремиться прикрепиться насколько возможно к левому краю родительского элемента, но 1 блок ему будет мешать, следовательно, он прикрепиться к правому краю 1 блока.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Примечание: Когда плавающим элементам не будет хватать ширины контейнера, они будут перемещаться вниз.

Способы отмены обтекания

Плавающие блоки очень часто применяются при вёрстке веб-страниц. Однако бывают ситуации и довольно часто, когда необходимо отменить блоку обтекание с одной или с двух сторон. Существует несколько способов как это сделать:

1. С помощью CSS свойства clear, которое имеет значение left (отменяет обтекание с левого края элемента), right (отменяет обтекание с правого края) или both (отменяет обтекание элемента одновременно с левого и правого краёв). В зависимости от ситуации это свойство можно применить непосредственно к блоку или создать пустой блок div со свойством clear и соответствующим значением. Например: <div></div> — этот блок не обтекает плавающий элемент с левого и правого краёв.

   <div>
     <div></div>
     <div></div>
     <div></div>
   </div>
   

2. С помощью CSS свойства overflow со значением auto или hidden. Принцип заключается в том, что плавающие элементы помещаются в контейнер div, которому добавляется свойство overflow. Но будьте осторожны со свойством overflow и просчитайте возможные размеры плавающих элементов.

   <div>
     <div>
       <div></div>
       <div></div>
     </div>
     <div></div>
   </div>
   

3. С помощью псевдоэлемента :after. Данный способ заключается в добавление невидимого блока, который отменяет обтекание.

   <style type="text/css">
   .clearfix:after {
   	content		: "."; <!-- Выводит точку -->
   	visibility	: hidden; <!-- прячем точку -->
   	display		: block; <!-- Элемент является блочным -->
   	height		: 0; <!-- Высота блока равна 0 -->
   	clear		: both; <!-- Отменяем обтекание -->
   }
   </style>
   ...
   <div>
     <div>
       <div></div>
       <div></div>
     </div>
     <div></div>
   </div>
   

Изменение высоты контейнера, содержащего плавающий блок

1. С помощью свойства clear. Для этого необходимо поместить пустой контейнер с этим свойством после плавающего блока.

   <div>
     <div></div>
     <div></div>
   </div>
   

2. С помощью свойства overflow. Для этого необходимо создать контейнер и поместить в него плавающие блоки. Затем добавить к контейнеру стиль со свойством overflow, которому задать значение hidden или auto.

   <div>
     <div></div>
   </div>
   

html — Как предотвратить обертывание встроенных блоков div?

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил 8 лет, 5 мес. Назад

Просмотрено 70к раз

jsFiddle демонстрация

Я хочу, чтобы для div s было:

• Оберните их содержимое.
• Оставаться в исходной связанной строке, по существу, без переноса.

Обычно столы складываются друг под другом, когда они не могут оставаться на экране. Я бы предпочел, чтобы они были скрыты за кадром.

Я пробовал добавить overflow: hidden; к основному стилю макета. Я не хочу фиксировать ширину для каждого div . Он должен соответствовать содержимому.

  .layout {
  -moz-border-radius: 15 пикселей;
  радиус границы: 15 пикселей;
  вертикальное выравнивание: сверху;
  дисплей: встроенный блок;
}

.layoutbacking {
  -moz-border-radius: 15 пикселей;
  радиус границы: 15 пикселей;
  отступ: 5 пикселей;
  маржа: 5 пикселей;
  фон: #CCCCCC;
}  

  

  

    

      <таблица>
        
           заголовок 1 
           заголовок 2 
           заголовок 3 
           заголовок 4 
        
        
           данные 1 
           данные 2 
           данные 3 
           данные 4 
        
        
           данные 1 
           данные 2 
           данные 3 
           данные 4 
        
        
           данные 1 
           данные 2 
           данные 3 
           данные 4 
        
      
    
    

      

        <таблица>
          
             заголовок 1 
             заголовок 2 
             заголовок 3 
             заголовок 4 
          
          
             данные 1 
             данные 2 
             данные 3 
             данные 4 
          
        
      
      

      

        <таблица>
          
             заголовок 1 
             заголовок 2 
             заголовок 3 
             заголовок 4 
          
          
             данные 1 
             данные 2 
             данные 3 
             данные 4 
          
        
      
    
  
  

    

      <таблица>
        
           заголовок 1 
           заголовок 2 
           заголовок 3 
           заголовок 4 
        
        
           данные 1 
           данные 2 
           данные 3 
           данные 4 
        
      
    
    

      <таблица>
        
           заголовок 1 
           заголовок 2 
           заголовок 3 
           заголовок 4 
        
        
           данные 1 
           данные 2 
           данные 3 
           данные 4 
        
      
    
  

4,0101212 золотых знаков2525 серебряных знаков3535 бронзовых знаков

Создан 21 янв.

1,19011 золотых знаков1111 серебряных знаков3030 бронзовых знаков

Добавить пробелов: nowrap; к вашему .объявление стиля layout .

Это сделает именно то, что вам нужно: предотвратит упаковку div.

Смотрите

jsFiddle демонстрация

или запустите следующий фрагмент кода в полноэкранном режиме и измените его размер:

  .layout {
       белое пространство: nowrap; / * это помогает * /
          переполнение: скрыто; / * это предотвращает переполнение серых div * /
    вертикальное выравнивание: сверху;
     радиус границы: 15 пикселей;
           дисплей: встроенный блок;
}

.layoutbacking {
    радиус границы: 15 пикселей;
       фон: #CCCCCC;
          отступ: 5 пикселей;
           маржа: 5 пикселей;
}  

  

    

        

            <таблица>
                
                     заголовок 1 
                     заголовок 2 
                     заголовок 3 
                     заголовок 4 
                
                
                     данные 1 
                     данные 2 
                     данные 3 
                     данные 4 
                
                
                     данные 1 
                     данные 2 
                     данные 3 
                     данные 4 
                
                
                     данные 1 
                     данные 2 
                     данные 3 
                     данные 4 
                
            
        
        

            

                <таблица>
                    
                         заголовок 1 
                         заголовок 2 
                         заголовок 3 
                         заголовок 4 
                    
                    
                         данные 1 
                         данные 2 
                         данные 3 
                         данные 4 
                    
                
            
            

            

                <таблица>
                    
                         заголовок 1 
                         заголовок 2 
                         заголовок 3 
                         заголовок 4 
                    
                    
                         данные 1 
                         данные 2 
                         данные 3 
                         данные 4 
                    
                
            
        
    
    

        

            <таблица>
                
                     заголовок 1 
                     заголовок 2 
                     заголовок 3 
                     заголовок 4 
                
                
                     данные 1 
                     данные 2 
                     данные 3 
                     данные 4 
                
            
        
        

            <таблица>
                
                     заголовок 1 
                     заголовок 2 
                     заголовок 3 
                     заголовок 4 
                
                
                     данные 1 
                     данные 2 
                     данные 3 
                     данные 4 
                
            
        
  

  .leftContent {float: left; }
.rightContent {переполнение: скрыто; }
  

  

   Вы видите кучу слов.
  

  div {
  / * Это значение по умолчанию, вам не нужно
     явно объявить это, если не переопределить
     другое заявление * /
  пробел: нормальный;
}  

 .sammy-wrap {
    радиус границы: 6 пикселей;
    цвет фона: aliceblue;
    граница: 2 пикселя серого цвета;
    максимальная ширина: 70%;
    заполнение: 1em;
    нижнее поле: .4em;
}
.sammy-nowrap-1 {
    радиус границы: 6 пикселей;
    цвет фона: aliceblue;
    граница: 2 пикселя серого цвета;
    максимальная ширина: 70%;
    заполнение: 1em;
    нижнее поле: .4em;
    белое пространство: nowrap;
}
.sammy-nowrap-2 {
    радиус границы: 6 пикселей;
    цвет фона: голубой;
    граница: 2 пикселя серого цвета;
    максимальная ширина: 70%;
    заполнение: 1em;
    нижнее поле:.4em;
    белое пространство: nowrap;
    переполнение: скрыто;
    переполнение текста: многоточие;
}
  

  








 Медузафишская полосатая киллифиш, каторжник, сайра, белуха, белуга, осетр. Индийский лосось Mul mora cisco masu, рыбная рыба-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь, Sacramento, двустворчатый гигантский данио. 

 Медузафишский полосатый киллиф, каторжник, сайра, белуха, белуга, осетр. Индийский лосось Mul mora cisco masu, рыба-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь, двустворчатый гигантский данио Сакраменто.

 Медузафишский полосатый киллиф, каторжник, сайра, белуха, белуга, осетр. Индийский лосось Mul mora cisco masu, рыбная рыба-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь, Sacramento, двустворчатый гигантский данио. 

<Р> Medusafish & NBSP; ленточный & NBSP; Killifish & NBSP; арестант & NBSP; собачка & NBSP; сайра & NBSP; threadsail & NBSP; белуха & NBSP;. Осетровые рыбы & NBSP; Индийские & NBSP; мул & NBSP; мор & NBSP; сиг & NBSP; Мас & NBSP; лосось, & NBSP; roosterfish & NBSP; реквием & NBSP; акулы & NBSP; Нос & NBSP; lancetfish & NBSP; луфаря & NBSP; красный & NBSP ; луциан & nbsp; Sacramento & nbsp; двустворчатый & nbsp; гигантский & nbsp; данио.
 

  

  
 a [href * = "//"]: not ([href * = "jayfreestone.com"]) {
  &:после {
    содержание: '';
    дисплей: встроенный блок;
    ширина: 1em;
    высота: 1em;
    background-image: url ('external.svg ');
  }
}
 
  

  
  Это  ссылка  
 
  

  
 a [href * = "//"]: not ([href * = "jayfreestone.com"])> span {
  белое пространство: nowrap;

  &:после {
    
  }
}
 
  

  

 Это  ссылка  
 
  

  
  Это ссылка 
 
  

  
 a [href * = "//"]: not ([href * = "jayfreestone.com "]) {
  --icon-offset: 2em;
  padding-right: var (- смещение значка);

  &,
  &:после {
    дисплей: встроенный блок;
  }

  &:после {
    
    маржа слева: calc (var (- смещение значка) * -1);
  }
}
 
  

  
 a [href * = "//"]: not ([href * = "jayfreestone.com "]) {
  &:после {
    содержание: '';
    фоновое изображение: url ('external.svg');
  }
}
 
  

  

 Внешняя ссылка  
 
  

  
  Тест 
 
  

  
 
  Контрольная работа

 
  

  
 <а
  href = "http: // test.местный"
  > <диапазон
    > Тест  
 
  

  
 a [href * = "//"]: not ([href * = "jayfreestone.com"]) {
  &:после {
    содержание: '';
    маржа слева: var (- s-1);
    отступ слева: 1em;
    
    
    цвет фона: var (- цвет ссылки);
    изображение-маска: url ('... ');
    размер маски: 1em;
    положение маски: центр;
    маска-повтор: без повторения;
  }
}
 
  

 
 Div one 
 Раздел два 
 

 
 Div one 
 Раздел два 
 

 
 Div one 
 Раздел два 
 Третий дивизион