css混排3-左右交替2

 效果圖如下：（這篇文章與上一篇css 圖文混排2-圖文左右交替有異曲同工之妙，可技巧卻不是一樣呵呵）

查看demo

html代碼如下：

 

<div class="center">
	<div class="timeslot"> <span>2009</span>
	  <p>Duis acsi ullamcorper humo decet, incassum validus, appellatio
	    in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut,
	    jugis, delenit. </p>
	</div>
	<div class="timeslot even"> <span>2008</span>
	  <p>Duis acsi ullamcorper humo decet, incassum validus, appellatio
	    in qui tation roto, lobortis brevitas epulae. Et ymo eu utrum probo ut,
	    jugis, delenit. </p>
	</div>
</div>

css代碼如下：

 

*{
	    margin:0;
	    padding:0;
}
body{
	    text-align:center;
	    font-family:Arial, Helvetica, sans-serif;
	    font-size:12px;
}
.center{
	    width:500px;
	    margin:10px auto 0;
	    text-align:left;
}
.timeslot {
	    border-top:3px solid #DDDDDD;
	    float:left;
	    margin:0 0 10px;
	    padding:10px 100px 0 0;
	    position:relative;
	    width:235px;
}
.even {
	    border-color:#CA0000;
	    float:right;
	    padding:10px 0 0 100px;
}
.timeslot span {
	    color:#999999;
	    font-size:3em;
	    line-height:1em;
	    position:absolute;
	    right:0;
	    top:20px;
}
.even span {
	    color:#CA0000;
	    left:0;
}
p {
	    font-size:1.1em;
	    margin:5px 0;
	    padding:5px 0;
}