CSS 3 столбцы, почему третий столбец перехватывает другие 2?

109
18

Вот наименьшее количество кода, которое наглядно иллюстрирует мою проблему:


<html>
<body>
<div style="float: left; width: 200px;">One</div>
<div style="float: left; width: 200px;">Two</div>
<div style="background-color: #f0f;">Three</div>
</body>
</html>

Первые два div должны состоять из двух левых столбцов. Третий должен заняться остальной частью страницы. В конце концов, я собираюсь добавить опции, чтобы скрыть и показать 2 столбца слева.


Но почему цвет пурпурного цвета простирается до левого края браузера? Я пытаюсь заставить его начать с слова "Три".

спросил(а) 2021-01-25T18:04:38+03:00 4 месяца, 3 недели назад
1
Решение
89

Вам нужно также "поплавать" и в третьем столбце. Затем добавьте блок очистки.

ответил(а) 2021-01-25T18:04:38+03:00 4 месяца, 3 недели назад
63

См. Контексты блочного форматирования по W3C:


В контексте форматирования блоков каждый прямоугольник, оставшийся от внешнего края, касается левого края содержащего блока (для форматирования справа налево, касания правого края). Это справедливо даже при наличии поплавков (хотя ящики коробки могут сокращаться из-за поплавков), если только поле не устанавливает новый формат форматирования блока (в этом случае сам ящик может стать более узким из-за поплавков).



Вы можете избежать этого, заставив создать новый контекст форматирования блокировки:


<div style="background-color: #f0f; overflow: hidden">Three</div>

Если overflow: hidden не является для вас вариантом (всплывающие окна и т.д.), вот еще один способ:

<div class="has-columns">
<div class="column first">...</div>
<div class="column second">...</div>
<div class="column third">...</div>
</div>



.has-columns {
padding-left: 400px; /* padding reserved for floats */
}

.column.first {
width: 180px;
margin-left: -400px;
float: left;
}

.column.second {
width: 180px;
margin-left: -200px;
float: left;
}


Я должен признать, что поведение поплавков иногда может сбивать с толку.

ответил(а) 2021-01-25T18:04:38+03:00 4 месяца, 3 недели назад
44

В зависимости от того, что вы хотите, когда столбцы один и два исчезают, у вас есть несколько вариантов:


1) Если вы хотите, чтобы столбец 3 расширялся и заполнил все оставшееся пространство, просто добавьте overflow: hidden; в стили третьего div. Он будет течь рядом с двумя плавающими divs так же, как вы ожидаете.


2) Если вы хотите, чтобы третий столбец сохранил его размер и форму независимо от того, что происходит с столбцами 1 и 2, поплавьте его вправо с установленной шириной, такой как float: right; width: 200px;, и она больше не будет выполняться остальные два, но оставайтесь на 200 пикселей на правом краю контейнера.

ответил(а) 2021-01-25T18:04:38+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема