要素を横に並べる方法をまとめます。
画像を用意するのは面倒なので
少し手間がかかるので、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ページそのままコピーできるんですね..
