очистить плавающий, когда 3 блока div внутри основного div

У меня есть основной идентификатор div #main, который содержит 3 класса div .left .right и .left-top. левый и левый верхний блок div перемещаются влево, а правый блок - вправо. Css и Html приведены ниже. Здесь я не знаю, почему мой правый блок перемещается вниз, равный высоте left-top бокса, и размещается так, как будто у него есть верхнее поле. Я хочу, чтобы этот right div был только на самом верху.

JSFIDDLE: http://jsfiddle.net/9zTXt/2/

HTML:

<div id = "main">
<div class= "left-top"></div>
<div class = "left"></div>
<div class = "right"></div>    
</div>


CSS:

#main
{position:relative;
width:350px;height:800px;
background:grey; 
margin-top:20px;     
}
#main .left
{float:left;
position:relative;width:200px;height:800px;
background:red;
margin-top:10px;
}
#main .left-top 
{width:200px;height:30px;
background:blue;
}

#main .right
{float:right;position:relative;
width:130px;height:800px;background:green;
margin:10px 0px 0px 20px;   
}

html css css-float
person galexy    schedule 11.03.2013    source источник
comment
ваш css не соответствует вашему jsfiddle? это то, о чем вы говорите jsfiddle.net/9zTXt/2?   -  person abbood    schedule 11.03.2013
comment
да, я обновил это   -  person galexy    schedule 11.03.2013

Ответы (3)


arrow_upward
4
arrow_downward

попробуйте это http://jsfiddle.net/9zTXt/4/

html

<div id = "main">
    <div>
        <div class= "left-top"></div>
        <div class = "left"></div>
    </div>
    <div class = "right"></div>    
</div>

css:

#main .right
{
    float:right;position:relative;
    width:130px;height:800px;background:green;
    margin:0px 0px 0px 20px;   
}

#main > div {
  float: left;
}

объяснение: в основном оборачивайте ваши левые плавающие элементы в их собственный div, чтобы они не мешали правому плавающему элементу, и убирайте верхний край поля из вашего .right div

person abbood    schedule 11.03.2013
comment
Да, это то, что я хочу. Основное решение - обернуть левый float в его собственный div, чтобы его отдельные элементы и элементы внутри него никогда не сталкивались с внешними div. - person galexy; 11.03.2013
comment
Если по-прежнему .right обернут #main, и если #main float: left не портить другие мои стили внутри #divs, тогда все в порядке - person galexy; 11.03.2013
comment
да, это правильно .. .right по-прежнему обернут #main .. и пока #main имеет 0 полей и отступов, применение float:left к main не повлияет на содержащиеся в нем div .. Я рекомендую вам проверить это скопировав и вставив мой код в автономный браузер (т.е. не только jsfiddle) и увидев его собственными глазами .. если это сработает .. Я надеюсь получить правильный ответ: p - person abbood; 11.03.2013

arrow_upward
1
arrow_downward

Попробуйте переупорядочить свои div так, чтобы первым был div.right.

person Linus Caldwell    schedule 11.03.2013

arrow_upward
0
arrow_downward

Моя новая последовательность

<div id="main">

<div id="left"></div>
<div id="right"></div>
<div id="top-left"></div>

</div>

с верхним полем: 30 пикселей для левого div и 0 пикселей для правого div.

person galexy    schedule 11.03.2013
comment
С плавающим влево вы не можете иметь верхний div после левого div. Пожалуйста, посмотрите мой ответ: порядок должен быть правый, верхний левый, левый. Сценарий: jsfiddle.net/9zTXt/3 - person Linus Caldwell; 11.03.2013
comment
да, это здорово! но могу ли я иметь такой же вид с левым первым, на самом деле ЛЕВЫЙ - это мое основное поле содержимого. ВПРАВО - это моя боковая панель, а ВЕРХНИЙ ЛЕВЫЙ - это баннерная панель в моем макете. Я никогда не видел, чтобы боковая панель была написана первой перед полем содержимого в макете. - person galexy; 11.03.2013