css怎么实现页面中有3个div，当浏览器宽度足够时水平排列，当宽度不足时垂直排列
我仿照demo.template.iyuansu.net/t.admin/moban2/chat.html这个页面弄的，但是在消息窗口的左边仿照右边成员列表的样式添加了一...
我仿照demo.template.iyuansu.net/t.admin/moban2/chat.html这个页面弄的，但是在消息窗口的左边仿照右边成员列表的样式添加了一个div，原网页当浏览器宽度缩小后成员列表那个div会自动移动到下面去，我在左边添加了一个div后我想当浏览器宽度缩小后将我添加的div显示在上面，消息div显示在中间，成员列表div显示在下面，即自动从水平排列变成垂直排列，请问该怎么做呢？
我更改后的代码：
<div class="chat-users panel-newleft"> <div class="panel-title"> <h5> 群信息</h5> </div> <div class="panel-content"> <ul id="groupInfo"> <li style="margin-top: 10px;">群主：<span id="sp_theme"></span></li> </ul> </div> </div>
newleft这个样式仿照成员列表样式做的
.panel-newleft{ width:250px; top: 37px; height: 2500px; border-right-color: rgb(221, 221, 221); border-right-width: 1px; border-right-style: solid; position: absolute; background-color: rgb(242, 242, 242);}.panel-newleft .panel-title { width: 100%; border-bottom-color: rgb(221, 221, 221); border-bottom-width: 1px; border-bottom-style: solid; background-color: rgb(236, 236, 236);}.panel-newleft .panel-title h5 { margin: 0px; padding: 6px 10px 5px; color: rgb(119, 119, 119); font-size: 12px; text-shadow: 0px 1px 0px #ffffff;} 展开
我更改后的代码：
<div class="chat-users panel-newleft"> <div class="panel-title"> <h5> 群信息</h5> </div> <div class="panel-content"> <ul id="groupInfo"> <li style="margin-top: 10px;">群主：<span id="sp_theme"></span></li> </ul> </div> </div>
newleft这个样式仿照成员列表样式做的
.panel-newleft{ width:250px; top: 37px; height: 2500px; border-right-color: rgb(221, 221, 221); border-right-width: 1px; border-right-style: solid; position: absolute; background-color: rgb(242, 242, 242);}.panel-newleft .panel-title { width: 100%; border-bottom-color: rgb(221, 221, 221); border-bottom-width: 1px; border-bottom-style: solid; background-color: rgb(236, 236, 236);}.panel-newleft .panel-title h5 { margin: 0px; padding: 6px 10px 5px; color: rgb(119, 119, 119); font-size: 12px; text-shadow: 0px 1px 0px #ffffff;} 展开
3个回答
展开全部
给你简单看一下原理 主要是要用到body的onresize功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onresize="fn()">
<div id="a">
<div style="width:300px;height:200px;border:5px #2167ba dashed;float:left;"></div>
<div style="width:300px;height:200px;border:5px #cd1b1b dashed;float:left;"></div>
</div>
<script type="text/JavaScript">
function fn(){
document.getElementById("a").style.width=document.documentElement.clientWidth;
}
</script>
</body>
</html>
追问
还有个问题，中间那个div是可缩放的，即当水平排列时中间的div可以根据屏幕的大小改变大小以充满屏幕，这样如何弄呢
追答
网页已上传 试一试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
