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

Вот наименьшее количество кода, который наглядно иллюстрирует мою проблему:CSS 3 колонки, почему третий столбец перехватывает другие 2?

<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 дивы должны быть 2 Левые колонки. Третий должен заняться остальной частью страницы. В конце концов, я собираюсь добавить опции, чтобы скрыть и показать 2 столбца слева.

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

источник

2010-04-01 Matt Dawdy

http://doctype.com/ может быть более подходящим для этого –

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

источник

2010-04-01 20:29:01 Ray

Я хочу плакать сейчас. –

Третий столбец не будет занимать остальную часть страницы, если будет сделан поплавок. – jholster

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

См Block formatting contexts по 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; 
}

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

источник

2010-04-01 20:50:42 jholster

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

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

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

источник

2010-04-02 00:32:20

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

ответ

Смежные вопросы