<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
div,img{border:1pxborder:red solidmargin:0px} /*此行可删除*/
#personal_info{
margin:0 auto
height:100%
border-color:red
width:910px
height:100%
clear:both
}
#profile_img{
float:left /*控制此DIV居左*/
height:90px
width:90px
border:1px solid #333
clear:right
}
img{ margin-left:4pxmargin-top:4px} /*另行控制图片*/
#profile_info{
width:800px
float:right /*控制此DIV居右*/
margin-left:10px
}
#profile_name{
float:left
clear:right
margin-top:5px
margin-bottom:5px
width:100%
font-size:16px
font-weight:bold}
#profile_status{
width:100%
clear:both
margin-bottom:5px
}
#profile_time{
width:100%
color:#999
margin-bottom:5px
clear:both
}
#profile_wen{
width:100%
clear:both
}
</style>
<body>
<div id="personal_info">
<div id="profile_img"><img src="D:\桌面\http_imgload-.jpg"></div>
<div id="profile_info">
<div id="profile_name">张三</div>
<div id="profile_status">很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的
文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很
长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文
字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长
的文字很长的文字很长的文字很长的文字很长的
</div>
<div id="profile_time">显示时间</div>
<div id="profile_wen">另一段文字</div>
</div>
</div>
</body>
</html>
css如何让三个div并排展示，其实就是设置一个浮动点，让三个div靠左或者靠右浮动；
主要标签用于：float：left(靠左对齐)float:right(靠右对齐)：示例如下：
1、首先打开用到的编辑工具这里用DW
2、为了方便观察，我们把三个div设置三个背景颜色来观察，设置三个div样式这里取名：div1 div2 div3 并且引用三个样式；
详解：background:#颜色；是取的三个不同的div背景颜色；给三个div设置宽度为width:300px高度height:200px
3、展示出来的效果如图：
使用3.0的column属性即可设置
div
{
columns:100px 3
-moz-columns:100px 3/* Firefox */
-webkit-columns:100px 3/* Safari 和 Chrome */
}
