html - CSS 正确对齐 Div

Question

所以我有这两个大 div，我希望一个作为主栏，一个作为右侧的侧边栏。我试过让它们都向左浮动，也试过使用宽度百分比，但我无法弄清楚。也许你们可以？ 这是 HTML 代码:

<div class="container box" style="clear:both !important;">
</div>
<div class="sidebar sidebarbox" style="clear:both !important;">
</div>

然后这是CSS:

.box {
    background-color: rgba(224, 222, 217, 0.25);
    -moz-box-shadow: 0 0 10px #1a1a18;
    -webkit-box-shadow: 0 0 10px #1a1a18;
    box-shadow: 0 0 10px #1a1a18;
    border: 1px solid #ffffff;
    margin-top:25px;
}
.container {
margin-left: auto;
margin-right: auto;
float: left;
width: 60%;
padding: 20px;
background-color: none;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 450px;
}
.sidebar {
float: left;
width: 20%;
padding: 20px;
background-color: none;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    margin-right:10px;
min-height: 450px;
}
.boxsidebar {
    background-color: rgba(224, 222, 217, 0.25);
    -moz-box-shadow: 0 0 10px #1a1a18;
    -webkit-box-shadow: 0 0 10px #1a1a18;
    box-shadow: 0 0 10px #1a1a18;
    border: 1px solid #ffffff;
    margin-right:10px;
}

有人能解决这个问题吗？非常感谢您的帮助。

Answer 1

您有覆盖 float 的内联样式(设置为重要)。

将您的 html 设置为:

<div class="container box">
</div>
<div class="sidebar sidebarbox">
</div>
<div style="clear:both;"></div>

您的代码可以稍微清理一下..但是上面的内容将解决您的框不彼此相邻 float 的问题。