在边栏中没有按预期浮动的Div

Question

我已经搜索了如何将divs彼此相邻的主题并尝试了这些主题。 首先让我展示一下我计划设计的

我创建了内容和侧边栏，并使侧边栏流畅。再次在我的侧边栏中，我正在使侧边栏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

这是典型的浮点问题 - 浮动两个div都不对，或者在div1之前更改顺序 - div2。

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

并在div之后立即清除。

Answer 2

确定。因此，即使具有特定宽度，您的'div1'也会显示为块宽继承宽度，并且两边都清晰，直到您不会将其设置为浮动。设置display: inline[-block]。

Answer 3

就像@Circadian说的那样，很难说没有HTML / CSS但是尝试：

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

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

}

使用'clear'属性可以清除左侧，右侧或两者的元素。

实际上，如果你左右浮动你可能不需要清除属性。如果两者都向左浮动并且您希望它们一个在另一个之下，则应使用clear属性。否则，向左浮动两个元素并向第一个div添加一个margin-right以添加一些间距。