読者です 読者をやめる 読者になる 読者になる

フロートの練習

ちょっと複雑なカラムを作ってみました。

f:id:paris1204:20160213225643p:plain

 

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="float2.css">
<title>フロート練習2</title>
</head>

<body>
<div id="container">
<div id="wrapper">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>
<div id="g">G</div>
<div id="h">H</div>
<div id="i">I</div>

</div><!--wrapper-->
</div><!--container-->
</body>
</html>

 

 

@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;}

a{text-decoration:none;}

ul{list-style:none;}

/*body*/
body{font-size:16px;
background-color:#E3DCDD;}

#container{width:790px;
height:790px;
margin:0 auto;
padding:5px;
background:#CFEEBC;}

#wapper{width:790px;
height:790px;
overflow:hidden;}

#wrapper div{float:left;
margin:5px;
}

#a{width:780px;
height:230px;
background:#ED9A9B;
}

#b{width:260px;
height:300px;
background:#A8D9E8;}

#c{width:250px;
height:100px;
background:#BBA4E3;}

#d{width:250px;
height:100px;
background:#E4EAB7;}

#e{width:200px;
height:190px;
background:#B39236;}

#f{width:300px;
height:90px;
background:#BCE6F6;}

#g{width:300px;
height:90px;
background:#24F176;}

#h{width:385px;
height:230px;
background:#D15423;}

#i{width:385px;
height:230px;
background:#A5C45F;}

f:id:paris1204:20160213225654p:plain

 

 

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="float3.css">
<title>フロート練習2</title>
</head>

<body>
<div id="container">
<div id="wrapper">
<div id="a">A</div>
<div id="kakomi">
<div id="b">B</div>
<div id="c">C</div>
</div><!--kakomi-->
<div id="d">D</div>
<div id="e">E</div>
<div id="f">F</div>

</div><!--wrapper-->
</div><!--container-->
</body>
</html>

 

 

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

html,body{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

a{text-decoration:none;}

ul{list-style:none;}

/*body*/
body{font-size:16px;
background-color:#E3DCDD;}

#container{width:740px;
height:690px;
padding:5px;
margin:0 auto;
background:#FFFFFF;}

#wrapper{width:740px;
height:690px;
overflow:hidden;}
#wrapper div{float:left;
}

#a{width:730px;
height:300px;
background:#9EE8C5;
margin:5px;}

#kakomi{width:310px;
height:380px;}

#b{width:300px;
height:180px;
background:#E28AED;
margin:5px;}

#c{width:300px;
height:180px;
background:#3A7857;
margin:5px;}
#d{width:110px;
height:370px;
background:#6EB6D7;
margin:5px;}

#e{width:300px;
height:180px;
background:#E1A65E;
margin:5px;}

#f{width:300px;
height:180px;
background:#1D75B9;
margin:5px;}