本部が別のオブジェクト

Question

の下にオブジェクトを送信しません。このcodepenを確認してください： https://codepen.io/Bhoopalan/pen/KybKRy

<div row id="container"> 
<div class="box">Box1</div> 
<div class="box">Box2</div> 
<div class="box">Box3</div> 
</div> 
<div> 
<button>Click Me</button> 
</div> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="effects.js"></script> 

私は3箱と「私をクリックして」ボタンを作成しました。これらの4つのオブジェクトはすべて個別のdivにあります。 私は3つのボックスが同じ行にあり、クリックのボタンがボックスの下にくることを望んでいました。

.box { 
    background: purple; 
    width: 100px; 
    height: 100px; 
    float: left; 
    margin: 10px; 
    color: white; 
    text-align: center; 
} 

#container { 
    max-width: 40%; 
    margin: 0 auto; 
} 

を次のようにCSSで私が■はフロートを使って書いた、私は左のみをフロートするボックスを期待しました。私の驚いたことに、別の部門にあったボタンもボックスの左に浮いています。私は何を間違えたのですか？

Answer 1

float: left;の代わりに、display propertyを使用する必要があります。

display: inline-block; 

また、rowは有効なhtml属性ではありません。 :)

.box { 
 
    background: purple; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 10px; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#container { 
 
    max-width: 40%; 
 
    margin: 0 auto; 
 
}

<div id="container"> 
 
    <div class="box">Box1</div> 
 
    <div class="box">Box2</div> 
 
    <div class="box">Box3</div> 
 
</div> 
 
<div> 
 
    <button>Click Me</button> 
 
</div>