图片与文字的排版比例要遵循黄金分割原理1：0.618黄金分割比是我们很早的时候就有学习到的，这也是目前在世界范围内都公认的最好构图比例，黄金分割率的页面比例可以给人带来视觉上的美感。这个是css图文混排的关键核心。
图文混排是版式设计中最常见的情况，图片与文字在传达版面信息上具有不同的特点，图片在视觉传达上可以辅助文字。
<html ><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>css图片和文本排版</title>
<style type="text/css">
body { margin:0}
.pic { width:868pxheight:300pxmargin:autobackground-color:#0099FF}
.pic img { padding:50pxheight:150pxwidth:200px}
.wz { width:300pxposition:relativeleft:300pxtop:-200px}
</style>
</head>
<body><div class="pic">
<img src="image\2.jpg" />
<div class="wz">css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版css 图片和文本排版</div>
</div>
</body>
</html>
实现div+css实现图片与文字水平对齐,首先需要的是用3个div布局，一个div包裹着其他的2个，给每个div设置好一定的宽度和高度，然后在对包裹的2个div使用float这个属性，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。具体可以看下代码：<html>
<head>
<style>
#round{
width:600px
height:300px
}
#div1{
width:200px
height:250px
float:left
}
#div2{
width:200px
height:250px
float:left
}
</style>
</head>
<body>
<div id='round'>
<div id='div1'>
<img src='图片地址'>
</div>
<div id='div2'>
<p>我是测试文字</p>
</div>
</div>
</body>
</html>
