css如何让两个容器并排显示
左右两个box，宽度和高度自适应，所以右边的没有固定宽度和高度。
当右边文字变多时，高度超过左边图片，会自动串到左边图片下方。
我如何让右边高度变高后，仍然保持在右边位置上？
代码如下：
<!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/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#personal_info{
height:100px;
width:100%;
clear:both;
}
#profile_img{
float:left;
height:90px;
width:90px;
border:1px solid #333;
margin-left:4px;
margin-top:4px;
clear:right;
}
#profile_info{
float:left;
margin-left:10px;
margin-bottom:10px;
}
#profile_name{
float:left;
clear:right;
margin-top:5px;
margin-bottom:5px;
width:80px;
font-size:16px;
font-weight:bold;}
#profile_status{
clear:both;
margin-right:10px;
margin-bottom:5px;
}
#profile_time{
color:#999;
margin-bottom:5px;
clear:both;
}
</style>
<body>
<div id="personal_info">
<div id="profile_img"><img src="img/user/user_test.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>
我这个页面需要宽度自适应，所以右侧div是不要宽度的，而且右侧居右的话，里面内容默认都居右了
<!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/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,img{border:1px;border:red solid;margin: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:4px;margin-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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style>
div,img{border:1px;border:red solid;margin: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:4px;margin-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>
DIV最好是加入宽度,高度可以不加.这样就比较容易控制.
比如
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:left;width:200px">右</div>
</div>
这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白
<div style="widht:500px">
<div style="float:left;width:200px">左</div>
<div style="float:right;width:200px">右</div>
</div>
以上写法，也是在同一行。不同的是，一个靠左，一个靠右。
这里边的两个DIV的中间有100PX的空白。
1.浮动之所以能够浮动，是因为在浮动的元素之前的那个元素也设置了浮动，并且父元素刨去之前元素的宽度之外还有余下的宽度给后面的这个浮动元素，才能浮动成功。所以必须设置的几个东西是，父元素宽度、两个子元素宽度，和两个子元素浮动。
2.为了避免在火狐浏览器或者以后的布局中出现问题，在子元素浮动，父元素高度自适应的情况下，应该给父元素加入overflow:hidden;否则父元素高度无法展开，因为子元素浮动之后，脱离了父元素本身的普通文本流。
3.清除浮动，是浮动元素后面的元素清除上一个浮动元素影响自己布局的功能，切勿乱用。本回答被提问者采纳
