Div обтекание блока: css — Обтекание блока другими блоками

Leave a Comment / Разное / By /

html — Обтекание вложенного div по элементу

Задать вопрос

Вопрос задан

Изменён 5 лет 6 месяцев назад

Просмотрен 184 раза

Имеется два div.

У div c id="block1" задана ширина и меняется автоматически в зависимости от ширины экрана.

У div c id="block2" ширина не задана. Как можно сделать, чтобы у этого div было обтекание по тексту или любому другому элементу?

Сейчас у него ширина такая же, как у div c id="block1".

#block1{
  width:35%;
  background:green;
  color:#ffffff;
}
#block2{ 
  background:red;
}
<div>
  <p>Привет Привет Привет</p>
  <div><p>Привет fff Привет Привет Привет Привет Привет</p></div>

</div>
  • html
  • css
  • html5
  • css3

7

Давай тогда разбираться на примере . .. чем именно плох флоат?

#block1{
  width:35%;
  background:green;
  color:#ffffff;
}

#block1:after {
  content: '';
  display: table;
  clear: both;
}

#block2{
  float: right;
  background:red;
}

.block2_content {
  width: 100px;
  height: 100px;
}
<div>
  <p>Привет Привет Привет</p>
  <div>
    <div></div>
   </div>
  <p>Привет Привет Привет Привет Привет Привет</p>
  <p>Привет Привет Привет Привет Привет Привет</p>
  <p>Привет Привет Привет Привет Привет Привет</p>
  <p>Привет Привет Привет Привет Привет Привет</p>
  <p>Привет Привет Привет Привет Привет Привет</p>
  <p>Привет Привет Привет Привет Привет Привет</p>

</div>

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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 вокруг содержимого и удерживать его по центру

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

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

 
    Ярлык 1
 

    Ярлык 2
    Ярлык 3
    Ярлык 4
    Ярлык 5

Этот макет предполагает, что содержимое .. теги контрольных меток .. будут отображаться в горизонтальной строке. Чтобы обрамить тег layout-linear вокруг содержимого тегов control-label, нужно сделать несколько вещей:

 макет-линейный[горизонтальный]
{
    дисплей: блок;
    box-sizing: граница-коробка;
    граница: 1px сплошной черный;
    отступы: 1px 1px 1px 1px;
    пробел: nowrap;
    ширина: 100%;
    ясно: оба;
    выравнивание текста: по центру;
}

Во-первых, для свойства box-sizing должно быть установлено значение border-box. Это заставит тег linear-layout (DIV) обернуть контент. Padding, Border, Margin гарантируют отображение пустого тега DIV. Другие приемы отображения пустого тега DIV — использование   или :after { content:.; видимость: скрытая; }.

Если вы не хотите, чтобы теги контрольных меток переносились, добавьте пробел : nowrap.

Я расскажу о text-align, когда буду обсуждать свойство float тега control-label.

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

 контрольная метка
{
    отображение: встроенный блок;
    /* плыть налево; */
    box-sizing: граница-коробка;
    граница: 1px сплошной черный;
    поля: 5px 5px 5px 5px;
    отступ: 5px 5px 5px 5px;
}

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

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

Чтобы метки элементов управления располагались справа налево, добавьте text-align : right в тег layout-linear. Или, в этом конкретном случае, установите text-align : center.

Опять же, box-sizing используется, чтобы указать тегу control-label (DIV) полностью обернуть его содержимое. Не только текст, но и края блока, нарисованные настройками границ, отступов и полей.

Такое расположение свойств CSS является причиной правильного или ожидаемого отображения внешнего и внутреннего блоков.

Счастливое кодирование.

html — упаковка DIV, даже с «display: inline-block»

Задавать вопрос

спросил

Изменено 3 года, 10 месяцев назад

Просмотрено 16 тысяч раз

У меня есть несколько разделов (многоколоночная страница) с набором «display: inline-block». Разве это не должно препятствовать их обертыванию? Я хочу их всех рядом:

 div.LabelColumn
{
    отображение: встроенный блок;
    отступ: 10 пикселей 0 0 40 пикселей;
    вертикальное выравнивание: сверху;
}
div.DataColumn
{
    отображение: встроенный блок;
    отступ: 10 пикселей 0 0 5 пикселей;
    вертикальное выравнивание: сверху;
}

Чтобы уточнить, я хочу, чтобы DIV располагались рядом, т. е. отображались в виде столбцов. Я хочу, чтобы каждый из них занимал столько места, сколько им нужно. Каждый из них, используя то, что я хочу отобразить, должен занимать около 100 пикселей, поэтому места достаточно для отображения нескольких столбцов рядом. Первый столбец будет иметь метку, второй — бит данных, третий — метку, а четвертый — бит данных.

Чтобы обеспечить более высокий уровень просмотра страницы, у меня есть div, который я перемещаю влево. Справа мне нужны несколько столбцов данных. Кстати, это работает в Chrome, но не в IE.

Я хотел бы, чтобы ширина автоматически настраивалась так, чтобы она была такой же ширины, как текст в DIV, если это возможно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *