html实现 左图右文_CSS实现左图右文混排布局的方法

本文实例讲述了CSS实现左图右文混排布局的方法。分享给大家供大家参考。具体分析如下：

CSS图文混排是我们布局网页时经常要用到的布局方法，本实例就是一个典型的左图右文的常用布局，美观大方，方法简便，你可以运行一下代码，看下效果，是不是你想要的呢？

复制代码代码如下:

CSS左图右文混排布局

* {

margin:0;

padding:0;

}

h3 {

font-size:12px;

color:#0066CC;

line-height:2em;

}

p {

font-size:12px;

text-indent:2em;

line-height:1.5em;

}

#container {

width:300px;

margin:0 auto;

margin-top:10px;

padding-right:3px;

border:1px dotted #666;

position:relative;

}

#leftContent {

position:absolute;

top:4px;

left:4px;

}

#leftContent img{

height:80px;

width:100px;

border:1px solid #ccc;

padding:2px;

}

#rightContent {

margin-left:120px;

}

十年朋友，一生财富

十年之间，我不认识你，你不属于我，走过渐渐熟悉的街头，十年之后，我们是朋友，还可以问候，只是再也找不到。。。