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 IS：

<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

これは

#accor { 
    float:left; 
} 

あなたの問題を解決します。このID #accorに float:leftを追加