侧边栏中的 div 未按预期浮动答案

【问题标题】：Divs not floating as expected in the sidebar侧边栏中的 div 未按预期浮动
【发布时间】：2012-06-22 00:08:43
【问题描述】：

我已经搜索了有关如何将 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;
    }

谢谢拉克斯

【问题讨论】：

没有 html/css 很难帮助
是的，给我们一个帮助你的机会，带来一些代码。

标签： css html css-float

【解决方案1】：

这是典型的浮动问题 - 将两个 div 向左浮动而不是向右浮动或更改顺序 - div2 在 div1 之前。

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

并在 div 之后立即清除。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

就像@Circadian 所说，没有 HTML/CSS 很难说，但试试：

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

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

}

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

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

【讨论】：

谢谢大家，你的建议很有魅力。再次感谢所有回复这篇文章的人。