CSS对齐正确

Question

所以我有这两个大divs，我希望一个是主栏，一个是右侧的侧栏。我试图让它们都浮动到左边，也尝试使用宽度百分比，但我无法弄清楚。也许你们可以？ 这是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是主内容容器，sidebar位于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; 
} 

您可以进一步清洁该代码通过创建添加太极拳，这样，你的选择是不一般的类杂乱无章。

希望这会有所帮助。