положение абсолютного ДИВ сломаны

Question

У меня есть DIV так:

<div class="main"> 
    <div class="container_1">A</div> 
    <div class="container_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat diam non neque imperdiet cursus ut ut erat. Sed pellentesque congue justo, sed auctor velit posuere ac.></div>  
</div> 

И мой CSS, как это:

.main div 
{ 
    float:left; 
} 

.main .container_2 
{ 
    width:500px; 
} 

.main .container_1 
{ 
    width:40px; 
} 

.main 
{ 
    position:absolute;  
    padding:5px; 
    color:#fff; 
    background-color:#365; 
} 

Проблема у меня есть, когда я не использую position:absolute; на мой main div, все сломано (вы можете посмотреть пример на jsfiddle. Все работает отлично, только если я использую абсолютную позицию в главном div, но я не хочу использовать абсолютную позицию, потому что я хочу, чтобы главный div выдавал свое пространство в Документ. Любая помощь пожалуйста?

Спасибо

Answer 1

Вы можете плавать главный ДИВ или дать ему display:inline-block взять полный размер своих плавающих детей, если вы не хотите, чтобы добавить <div style="clear:both;float:none;"></div> в разметке непосредственно перед закрытием контейнера DIV и после последний плавающий элемент.

.main 
{ 

    display:inline-block; 
    padding:5px; 
    color:#fff; 
    background-color:#365; 
} 

Fiddle

All About Floats

Answer 2

Вы можете сделать .main DIV имеют overflow: auto взять на высоте своего плавающего ребенка.

.main 
{ 
    overflow: auto;  
    padding:5px; 
    color:#fff; 
    background-color:#365; 
} 

Answer 3

Как дети main плывут вы должны добавить overflow: hidden в main или добавить еще div как:

<div style="clear: both;float:none;"></div> 

Answer 4

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

overflow:auto 

вместо

position:absolute; 

на .main

jsfiddle

Answer 5

Вы должны использовать clear всякий раз, когда вы плавающие элементы, чтобы убедиться, что родитель заворачивает все их содержимое, я хотел бы использовать CSS :after для этого

.main:after{ 
    content: ''; 
    display: block; 
    clear: both; 
} 

Answer 6

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

добавления:

.main{ 
    float: left; 
} 

исправляет проблему.

Answer 7

Я стараюсь избегать абсолютного позиционирования любой ценой. Если я обнаруживаю, что абсолютно позиционирую что-то просто, чтобы заставить его отобразить «правильный» способ, я обычно смотрю в другом месте на предмет проблем.

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

Как и большинство из них сказали здесь. Поплавок главного div. Должно помочь облегчить некоторые головные боли.

Я очистил некоторые вещи здесь, и обновление: http://jsfiddle.net/s58TF/

.main_2{ 
padding:5px; 
color:#fff; 
background-color:#365; 
float:left; 

}

Answer 8

Вы можете использовать:

.main { 
    overflow: hidden; 
} 

- Или -

Метод clearfix (если вы не хотите использовать «переполнение: скрытое» по другим причинам): http://css-tricks.com/snippets/css/clear-fix/

Это один работает, как правило:

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Просто добавьте класс «группа» в «основной» DIV, или заменить «группу» с «основной». Вот метод clearfix применяется и рабочий: http://jsfiddle.net/ksyFG/

---

Чтобы было ясно, это два отдельных решения: «переполнение: скрытый» или clearfix.