CSS：向左浮動不會使元素彼此相鄰浮動？

Question

我遇到了一個沒有意義的問題。

基本上，我試圖浮動2個div彼此相鄰，我在他們的CSS屬性中使用了float:left;，但他們不會相互浮動。

這是一個工作FIDDLE

這是我的CSS：

button.accordion { 
    background-color: #eee; 
    background-image:url(images/platenav-bg.png); 
    background-repeat:repeat; 
    color: #FFF; 
    cursor: pointer; 
    height:30px; 
    width: 220px; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 12px; 
    transition: 0.4s; 
    font-weight:bold; 
    padding-left:5px; 
} 

button.accordion.active, button.accordion:hover { 
    background-color: #ddd; 
} 

button.accordion:after { 
    content: '\02795'; 
    font-size: 13px; 
    color: #fff; 
    float: right; 
    margin-left: 5px; 
} 

button.accordion.active:after { 
    content: "\2796"; 
    color:#FFF; 
} 
div.panel { 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6s ease-in-out; 
    opacity: 0; 
} 

div.panel.show { 
    opacity: 1; 
    max-height: 500px; 
} 

這是我的HTML：

<div style="width:100%;"> 

<div id="accor" style="width:220px; margin-top:10px;"> 
<button id="ureg" class="accordion">1 </button> 
<div class="panel"> 

<p>Lorem ipsum...</p> 
</div> 

<button class="accordion">2 </button> 
<div class="panel"> 
    <p>Lorem ipsum...</p> 
</div> 

<button class="accordion">BORDER</button> 
<div class="panel"> 
    <p>3 </p> 
</div> 

</div> 



<div style="width:200px; margin-top:10px; float:left; background-color:#000; height:200px;"> 


</div> 

</div> 

可能有人請告知呢？

Answer 1

附加float:left這個ID #accor這將解決你的問題

#accor { 
    float:left; 
}