Почему в следующем коде два блока не плавают бок о бок?

 <style type="text/css">
    .box1{
        width: 300px;
        height: 300px;
        background: purple;
        float:left;
    }

    .box2{
        width: 300px;
        height: 300px;
        background: yellow;
    }
    </style>

    <div class="box1"></div>
    <div class="box2"></div>

jsFiddle с описанием вопроса.

0
Chead 5 Мар 2014 в 03:15

4 ответа

Лучший ответ

Свойство css float удаляет элемент из обычного потока страницы. Это означает, что на его позицию не повлияют другие элементы (которые также не являются плавающими). По этой причине в вашем примере два элемента располагаются друг над другом.

Если вы также назначите .box2 свойство float:left, они будут сидеть рядом друг с другом, как я полагаю, вы ожидаете.

10
Will P. 4 Мар 2014 в 23:20

Просто небольшое изменение:

.box2{
width: 300px;
height: 300px;
background: yellow;
float:left;
}

Рабочая скрипка

0
Jatin 4 Мар 2014 в 23:22

Ответ, данный Уиллом и Джатином, правильный, но вы также можете попробовать обернуть оба div в одну оболочку div и отобразить оба div в одной строке

Примере:

 .container
 {
     display:inline-block;
 }

.box1{
    width:50px;
    height:200px;
    background: purple;
    float:left; 
 }

.box2{
    width: 50px;
    height:200px;
    background: yellow;
    float:right;
}

JSFiddle

0
Osama Yawar Khawaja 4 Мар 2014 в 23:30

Вам нужно сделать две вещи:

1) Оберните два блока в div

2) Добавить поплавок: слева в оба ящика

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

0
Harini K K 4 Мар 2014 в 23:41