今天看圖解CSS的章節，雖然主要講的是nth-of-type選擇器的使用，但是本人卻關註到了頁面的排版方式，如下： HTML CSS 效果： 然後百思不得其解，因為img本身為行內元素，加了float之後變成了inline-block元素，兼有塊狀元素與行內元素的“氣質”，但緊跟在其後面的p元素是真 ...
今天看圖解CSS的章節，雖然主要講的是nth-of-type選擇器的使用，但是本人卻關註到了頁面的排版方式，如下：
HTML
<body>
<div class="article">
<img src="http://img.ujian.cc/nice/35.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/36.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/38.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</body>
CSS
<style type="text/css">
.article {
width: 500px;
margin: 20px auto;
}
.article img:nth-of-type(odd){
float: left;
margin-right: 10px;
}
.article img:nth-of-type(even){
float: right;
margin-left: 10px;
}
</style>
效果：
