要素を横に並べる

要素を横に並べる方法をまとめます。

画像を用意するのは面倒なので

少し手間がかかるので、div要素を用います。

.divBox{
background-color: #00BFFF;
height: 100px;
width: 100px;
margin: 10px;
/* paddingは内側 */
/*padding: 10px;*/
}

 

そのままだとdiv要素なので改行されてしまい、縦に並びます。

<div class="divBox">Box1</div>
<div class="divBox">Box2</div>
Box1
Box2

 

(1)floatを用いる

style="float:left;"

 

(2)inline-blockを用いる

.divBox{
background-color: #00BFFF;
height: 100px;
width: 100px;
margin: 10px;
display:inline-block;
}

 

横に並ぶ 

Box1
Box2

 

コメント:

要素が並ぶことよりも、Chromeの便利さに驚きました()

エクスプローラを介さずに、画像どころかWEBページそのままコピーできるんですね..