昨日の復習

今日は祝日なので昨日勉強した１つwrapperの中にあるdiv要素をどのようにすれば一度のfloat:left;の設定で全てきれいに間隔を保ちながら綺麗に整列できるかを考えてみました。

完成図写真

f:id:paris1204:20160211143742j:plain

 

 以下、入力内容参照

HTML

<!doctype html>
<html　lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="float.css">
<title>floatの練習</title>
</head>

<body>
<div id="container">
<div id="wrapper">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
</div><!--wrapper-->
</div><!--container-->
</body>
</html>

 

CSS

 

@charset "UTF-8";
/* CSS Document */

/*reset.............*/
html,body{font-family:"Hiragino kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

/*font-size*/
html{font-size:62.5%;}
body{font-size:16px; font-size:1.6rem;}

/*body......*/
body{background:#E0ECEB;}

#container{width:590px;
height:590px;
padding:5px;
margin:0 auto;
background:#E1F04D;}

#wrapper{width:590px;/*#wrapperの幅は＃ccontainerの幅と同じにすること*/
height:590px;}
#wrapper div{float:left;
margin:5px;}
#a{width:200px;
height:370px;
background:red;
}

#wrapper div#b{width:370px;
height:200px;
background:blue;
}

#c{width:100px;
height:160px;
background:gold;}

#d{width:150px;
height:160px;
background:green;}

#e{width:100px;
height:160px;
background:orange;}

#f{width:200px;
height:200px;
background:olive;}

#g{width:160px;
height:200px;
background:aqua;}

#h{width:200px;
height:200px;
background:brown;}