css 圖文混排2-圖文左右交替

 

查看demo

html代碼如下：

<div class="events_item">
	<img src="images/pic19.jpg" />
	<div class="events_intro">
	<h3>Name of the event</h3>
	<p>Suspendisse potenti. Nulla non lacus purus, non accumsan risus. Nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. Nullam at nunc eros, sit amet tempor ante. Curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. Suspendisse nibh est, tincidunt at luctus congue.</p>
	<p class="more"><a href="#">see detail...</a></p>
	</div><!--events_intro-->
	</div><!--events_item-->
	
	<div class="events_item">
	<img class="flo_right" src="images/pic19.jpg" />
	<div class="events_intro">
	<h3>Name of the event</h3>
	<p>Suspendisse potenti. Nulla non lacus purus, non accumsan risus. Nunc dui odio, dignissim sit amet lacinia nec, interdum ut nisi. Nullam at nunc eros, sit amet tempor ante. Curabitur accumsan, ante et sollicitudin posuere, risus ligula aliquet nulla, nec rhoncus metus sem vitae dui. Suspendisse nibh est, tincidunt at luctus congue.</p>
	<p class="more"><a href="#">see detail...</a></p>
	</div><!--events_intro-->
	</div><!--events_item-->

注意每項的代碼都是一致的，先圖片後文字，然後通過css實現交替效果（偶數項圖片有添加一class）

css代碼如下：

*{
margin:0;
padding:0;
}
body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
.events_item{
border-bottom:1px solid #E2E2E2;
clear:both;
overflow:hidden;
padding:20px 0;
width:620px;
}
img{
float:left;
}
.flo_right{
float:right;
}
.events_intro{
overflow:hidden;
width:370px;
}
.events_intro h3 {
background:none repeat scroll 0 0 #C13832;
color:#FFFFFF;
font-size:14px;
line-height:25px;
padding-left:10px;
text-transform:uppercase;}
.events_intro p{
padding:10px;
line-height:1.5;
}
p.more{
text-align:right;
padding:0;
}
p.more a {
color:#C13832;
margin-right:20px;
text-decoration:underline;
}

css注意點如下：
第一：如css圖文混排一（float,overflow）中的overflow方法
設置.events_intro的css爲overfow，注意這裏還要加上width，否則ie6下的.events_intro的子元素的margin或padding都沒有效果，可以把width去掉試試。
第二：設置偶數項的img 添加class爲 flo_right，讓其向右浮動

查看demo