左图片右文字的组合

来源：互联网发布：nginx绑定多个域名编辑：程序博客网时间：2024/04/29 21:54

今天做的是图片加文字的组合：

<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;}

0 0