3連休の課題(5) - ichisemasashi's blog

[http://d.hatena.ne.jp/web-mind/20130616/p1:[CSS]復習(5)float]
A24

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
body, div {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
#container {
   width: 500px;
}
div {
   width: 500px;
   height: 200px;
}
#p01 img {
  float: left;
}
#p03 img {
  float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="p01">
<img src="sky.jpg" alt="sky" width="300" height="200">段落1のテキストです。段落1のテキストです。段落1のテキストです。
</div>
<div id="p02">
段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。
</div>
<div id="p03">
<img src="sky.jpg" alt="sky" width="300" height="200">段落3のテキストです。段落3のテキストです。段落3のテキストです。
</div>
<div id="p04">
段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。段落4のテキストです。
</div></div>
</body>
</html>

A25

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<style>
body, div {
  margin: 0;
  padding: 0;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
div {
  margin: 5px;
}
#container {
   width: 600px;
   height: 110px;
}
#pa {
  background-color: #FFFF00;
   width: 600px;
   height: 100px;
}
#pb {
  background-color: #99FFFF;
   width: 290px;
   height: 100px;
   float: left;
}
#pc {
  background-color: #99FF66;
   width: 290px;
   height: 100px;
   float: right;
}
#pd {
  background-color: #FF99FF;
   height: 100px;
   width: 600px;
}
</style>
</head>
<body>
<div id="pa">ブロックA</div>
<div id="container">
<div id="pb">ブロックB</div>
<div id="pc">ブロックC</div>
</div>
<div id="pd">ブロックD</div>
</body>
</html>