CSS 3 столбца, почему третий столбец занимает другие 2? - PullRequest
Новая
       3

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

0 голосов
/ 02 апреля 2010

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

<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>

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

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

Ответы [ 3 ]

3 голосов
/ 02 апреля 2010

Вам также нужно «всплыть» в третьем столбце. Затем добавьте очищающий блок после него.

1 голос
/ 02 апреля 2010

См. Блокировать контексты форматирования от W3C:

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

Этого можно избежать, форсируя создание нового контекста форматирования блокировки: 

<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;
}

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

0 голосов
/ 02 апреля 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...