div并排,如何实现手动拉伸宽度,两个div同时变化
页面是有两个div并排组成的，现在想实现，用户在浏览器中拖动两个div中线位置，调整左右两个页面的宽度，谢谢各位啦...
页面是有两个div并排组成的，现在想实现，用户在浏览器中拖动两个div中线位置，调整左右两个页面的宽度，谢谢各位啦
展开
3个回答
展开全部
找控件是最直接的方法。
放三个div，左面一个，右面一个，中间一个。中间的涂黑，就是那个黑条了。
然后在中间的div上做几个js事件，就行了。鼠标按下、鼠标经过、鼠标抬起。
然后去修改左面和右面的div的宽度。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>Border Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/default/easyui.css"/>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="easyui-layout" style="height: 800px;" id="pop" runat="server">
<div data-options="region:'west',split:true" title="目录结构" style="width: 325px;">
<asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"
Width="164px">
<Nodes>
<asp:TreeNode Text="aaaaaaa" Value="1"></asp:TreeNode>
<asp:TreeNode Text="bbbbbbb" Value="2"></asp:TreeNode>
<asp:TreeNode Text="ccccccc" Value="3"></asp:TreeNode>
<asp:TreeNode Text="ddddddd" Value="4"></asp:TreeNode>
<asp:TreeNode Text="eeeeeee" Value="5"></asp:TreeNode>
<asp:TreeNode Text="fffffff" Value="6"></asp:TreeNode>
<asp:TreeNode Text="ggggggg" Value="7"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
<div data-options="region:'center',title:'数据手册'" style="background: #fafafa; overflow: hidden">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
通过参数sizeLeft, sizeRight, sizeTop, sizeBottom (定义一个且只能是一个来设置初始的分栏位置)
通过参数minLeft, minRight, minTop, minBottom, maxLeft, maxRight, maxTop, maxBottom来设置每个栏最小和最大的尺寸，是值得时候注意不要互相冲突或与父窗体冲突。比如一个固定宽度为200px的分栏，不能同时定义minLeft:120和minRight:120，因为这样总宽度已经超过200px了。
放三个div，左面一个，右面一个，中间一个。中间的涂黑，就是那个黑条了。
然后在中间的div上做几个js事件，就行了。鼠标按下、鼠标经过、鼠标抬起。
然后去修改左面和右面的div的宽度。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>Border Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/default/easyui.css"/>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="easyui-layout" style="height: 800px;" id="pop" runat="server">
<div data-options="region:'west',split:true" title="目录结构" style="width: 325px;">
<asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"
Width="164px">
<Nodes>
<asp:TreeNode Text="aaaaaaa" Value="1"></asp:TreeNode>
<asp:TreeNode Text="bbbbbbb" Value="2"></asp:TreeNode>
<asp:TreeNode Text="ccccccc" Value="3"></asp:TreeNode>
<asp:TreeNode Text="ddddddd" Value="4"></asp:TreeNode>
<asp:TreeNode Text="eeeeeee" Value="5"></asp:TreeNode>
<asp:TreeNode Text="fffffff" Value="6"></asp:TreeNode>
<asp:TreeNode Text="ggggggg" Value="7"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
<div data-options="region:'center',title:'数据手册'" style="background: #fafafa; overflow: hidden">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
通过参数sizeLeft, sizeRight, sizeTop, sizeBottom (定义一个且只能是一个来设置初始的分栏位置)
通过参数minLeft, minRight, minTop, minBottom, maxLeft, maxRight, maxTop, maxBottom来设置每个栏最小和最大的尺寸，是值得时候注意不要互相冲突或与父窗体冲突。比如一个固定宽度为200px的分栏，不能同时定义minLeft:120和minRight:120，因为这样总宽度已经超过200px了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼主，看了你的问题我想了一下，应该这样是可以；
两个div浮动左然后把宽度设置成百分比，应该就可以了。
我没试过。楼主可以试下.
.a{float:left;width:30%}
两个div浮动左然后把宽度设置成百分比，应该就可以了。
我没试过。楼主可以试下.
.a{float:left;width:30%}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
