カラムレイアウトの設計演習 続パターンC

検討

カラムレイアウトの設計演習 パターンC の続き

レイアウトと素材

もっとも苦労したところ

ｈｔｍｌ

<div class="post">
  <a href="#">
    <div class="date">
      <span>1</span>AUG
    </div>
    <h2>風車と風の関係</h2>
    <p>
      <img src="img/windmill_thumb.jpg" alt="">本文
    </p>
    <p class="more">READ MORE</p>
  </a>
</div>
<!--/.post-->

ｃｓｓ

/*.post*/
.post{
    border:1px solid #aaa;
	margin-bottom:20px;
}
.post a{
	color:#000;
	display:block;
	overflow:hidden;
	padding:10px;
}
.post a:hover{
	background:#ddd;
	background: -webkｉt-gradient(linear,left top,left bottom,from(#fff),to(#ddd));
	background: -webkｉt-linear-gradient(#fff 0%,#ddd 100%);
	background: -moz-linear-gradient(#fff 0%,#ddd 100%);
	background: -o-linear-gradient(#fff 0%,#ddd 100%);
	background: -ms-linear-gradient(#fff 0%,#ddd 100%);
	background: linear-gradient(#fff 0%,#ddd 100%);
}
.post .date{
	background:#537685;
	color:#fff;
	font-weight:bold;
	font-family:
	Helvetｉca,Arial,sans-serif;
	text-align:center;
	padding:10px 15px;
	float:left;
	font-size:14px;
}
.post h2{
	border-bottom:1px solid #aaa;
	margin-bottom:20px;
	line-height:1.6;
	padding:5px 0 1px 70px;
	font-size:22px;
}
.post .date span{
	display:block;
	font-size:20px;
}
.post p img{
	float:left;
	clear:left;
	margin-right:10px;
}
.post p{
	clear:left;
	font-size:14px;
	line-height:1.6;
}
.post .more{
	background:url(img/more_gray.pｎg) no-repeat 99% center;
	text-align:right;
	padding-right:36px;
	color:#888;
	clear:none;
	font-size:16px;
}

floatとclear

１．.date をfloat:left したところ。img(float:left済)の左に空きができる。

２．img clear:left　で.dateのフロートの影響を絶つとimgが左に寄れる。まだ本文（p）には.dateのフロートが効いているので隙間から回りこんでしまう。

３．.post p に clear:left　でフロートの影響が排除され、imgの右へ。imgと「本文」は同じ「pブロック」に属しているが、「READ MORE」は別の「pブロック」だから改行され、一段下へ。

４． p.more　に clear:noneにすることでimgのフロートが効いてimgの右に回りこむ。

overflow:hidden

子要素がフロートして高さがなくなっているので親要素にoverflow:hiddenで高さを持たせる。しかし「.post」と「.post a」、どちらにつけるかで結果が変わる。

ミス防止

文章を入れるのは最後にする。そうしないと不具合が出た際に問題箇所を探すのに苦労する。