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

你有内联样式（设置为重要），它覆盖浮动。

将您的html设置为：

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

您的代码可能会被清理一下..但上面的内容将解决您的问题，这些问题不会相互浮动。

Answer 2

如果我理解正确，您希望box为主要内容容器，侧边栏位于box元素的右侧。

所有你需要的是：

HTML

<div class="container box">
</div>
<div class="sidebar sidebarbox">
</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-right: 10px;
}
.container {
float: left;
width: 60%;
padding: 20px;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 450px;
}
.sidebar {
float: left;
width: 20%;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
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;
}

您可以通过创建添加shadowbox的常规类来进一步清理此代码，这样您的选择器就不会那么混乱。

希望这有帮助。

CSS正确对齐Div

2 个答案: