Div не плавает, как ожидалось в боковой панели

Question

Я искал темы о том, как плавать div рядом друг с другом и пробовал те.Сначала позвольте мне показать, что я планирую создать

Я создал контент и боковую панель и сделал так, чтобы боковая панель работала правильно.Снова в моей боковой панели я делаю боковую панель div 1 и боковую панель div 2, чтобы плавать рядом.В моем CSS я заставляю боковую панель div 2 плавать вправо, она плавает вправо, но точно под боковой панелью div 1, как показано на рисунке ниже

Я знаю, это может показаться простым, но все же я упускаю что-то важное,Был бы признателен, если бы кто-то указал на это.

Вот код для боковой панели и div

    #sidebar {
        width: 720px;
        float: right;
        margin: 60px 0 30px;
    }

.div1{
width: 200px;
}
    .div2{    
        float: right;     
        width: 300px;
    }

Спасибо Raaks

Answer 1

Хорошо. Таким образом, ваш div1 даже с определенной шириной будет отображаться как ширина блока, унаследованная по ширине, и с четкими обеими сторонами, пока вы не установите его как float. Либо установите его display: inline[-block].

Answer 2

Как сказал @Circadian, трудно сказать без HTML / CSS, но попробуйте:

.div1{
    float:left;
    width:200px;
}

.div2{
    clear:both;
    float:right;
    width:300px; 

}

Использование свойства 'clear' позволяет очистить элементы слева, вправо или оба.

На самом деле, если вы перемещаете их влево и вправо, вам может не понадобиться свойство clear.Если оба плавают влево, и вы хотите, чтобы они появлялись один под другим, следует использовать свойство clear.В противном случае поместите оба элемента влево и добавьте поле margin-right к первому элементу div, чтобы добавить интервал.

Answer 3

Это типичная проблема с плавающей точкой - плавающие оба div влево не вправо ИЛИ не меняйте порядок - div2 перед div1.

.div1{
width: 200px;
float:left
}
.div2{    
float: left;     
width: 300px;
}

и очищайте сразу после div.