ホームページ

32．名無し - 14/04/08 10:45:35 - ID:Z1Y2pgfNxg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>レイアウト4+</title>
<style type="text/css">

*{margin:0 auto;　
}

#box1{
width:600px;
height:600px;
background:red;

}

#box2{
width:190px;
height:100px;
background:yellow;
float:left;
margin-right: 15px;
}

#box3{
width:190px;

background:blue;
float:left;
}

#box4{
width:190px;

background:orange;
float:right;
}

#box5{
width:600px;

background:green;
margin-top:20px;
}

#box0{
width:600px;

background:pink;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix { display: block; }

</style>
</head>
<body>

<div id="box1">
<div id="box0" class="clearfix">
<div id="box2">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
<div id="box3">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</div>
<div id="box4">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>

</div>
</div>
<div id="box5">
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>

</div>
</div>

</body>
</html>

このスレッドに投稿する（※は入力必須）
名前	ユーザIDで書き込む
メール
本文※	全角1000文字以内
画像	※それぞれ5MB以下のJPG,PNG,GIF形式のファイルを3枚までアップロードできます。もっと追加もっと追加

利用規約をご確認のうえご記入下さい

PerfectCenter