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; 
} 

您可以進一步清潔該代碼通過創建添加太極拳，這樣，你的選擇是不一般的類雜亂無章。

希望這會有所幫助。