今天做的是图片加文字的组合:
<body>
<div class="main">
<img src="images/logo.jpg" class="logo" />
<div class="content">
<h2>suz</h2>
<div class="date">February 28,2007 at 9:58 pm</div>
<div class="re">re: your font-size update,</div>
<p>shouldn't you also update the IE5 sheet to include x-small too?-it's a quirk but IE5.x displays small as medium</p>
</div>
</div>
</body>
图片和文字的样式可以用四种方法:
方法一:img{ float:left;}
文字{float:right; width:右边文字部分的宽度;}
方法二:文字部分不使用float+width,使用margin-left:左半部分的宽度;即为
文字{margin-left:图片的 width+图片的 padding-left +图片的 padding-right+图片的margin-left +图片的 margin-right;}
方法三:文字部分不使用上面两种方法,直接使用overflow:hidden;
文字{overflow:hidden;}
方法四:图片和文字都不使用左右浮动,而使用定位:
.main{padding-left:图片的 width+ 图片的padding-left +图片的 padding-right+图片的margin-left +图片的 margin-right;
//注意,此处main的width比上面三种方法的width小了padding-left的大小。
position:relative;}
img{left:0; position:absolute;}