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

 

查看demo

html代码如下：

<div class="events_item">
	<img src=\'#\'" /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=\'#\'" /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