css如何让两个容器并排显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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,imgborder: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> 参考技术A <!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=gb2312" />
<title>无标题文档</title>
</head>
<style>
div,imgborder: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最好是加入宽度,高度可以不加.这样就比较容易控制. 参考技术B 并排的话，你需要使用CSS的float属性，然后在设置浮动；
比如
<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的空白。 参考技术C 有几个问题楼主需要明确一下
1.浮动之所以能够浮动，是因为在浮动的元素之前的那个元素也设置了浮动，并且父元素刨去之前元素的宽度之外还有余下的宽度给后面的这个浮动元素，才能浮动成功。所以必须设置的几个东西是，父元素宽度、两个子元素宽度，和两个子元素浮动。
2.为了避免在火狐浏览器或者以后的布局中出现问题，在子元素浮动，父元素高度自适应的情况下，应该给父元素加入overflow:hidden;否则父元素高度无法展开，因为子元素浮动之后，脱离了父元素本身的普通文本流。
3.清除浮动，是浮动元素后面的元素清除上一个浮动元素影响自己布局的功能，切勿乱用。本回答被提问者采纳
在div+css中如何让两个元素的层级关系改变，z-index,不是很好使……
层级关系的布局有两种解决方法：一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。
而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一个元素上方，那可以使用z-index；
而你说的不好用，则是zindex没有生效，没生效就是没有定义position属性，如果不想让元素的位置有所变化，就给赋予z-index属性的元素加上相对定位的position:relative; 参考技术A z-index是决定相对于同一容器的不同DIVposition:absolute显示时的覆盖问题，即谁挡着谁，前提是相对同一父容器，所以常常是相对BODY的几个position:absolute的DIV。
两个元素的层级关系改变，如果理解成谁显示上面下面的问题，可由以上思路解决。
首先要让这几个DIV处于同一父容器，position:absolute，就可以通过z-index控制谁显示在上面的问题。
如果层级关系理解成，两个DIV容器包含关系的改变，那是由代码位置决定的。 参考技术B z-index是决定相对于同一容器的不同DIVposition:absolute显示时的覆盖问题，即谁挡着谁，前提是相对同一父容器，所以常常是相对BODY的几个position:absolute的DIV。
两个元素的层级关系改变，如果理解成谁显示上面下面的问题，可由以上思路解决。 参考技术C z-index要配合position:absolute等属性..单单设置z-index是没效果的 参考技术D 啊啊啊啊 啊啊
以上是关于css如何让两个容器并排显示的主要内容，如果未能解决你的问题，请参考以下文章