div并排,如何实现手动拉伸宽度,两个div同时变化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div并排,如何实现手动拉伸宽度,两个div同时变化相关的知识，希望对你有一定的参考价值。
页面是有两个div并排组成的，现在想实现，用户在浏览器中拖动两个div中线位置，调整左右两个页面的宽度，谢谢各位啦
找控件是最直接的方法。放三个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了。 参考技术A 楼主，看了你的问题我想了一下，应该这样是可以；
两个div浮动左然后把宽度设置成百分比，应该就可以了。
我没试过。楼主可以试下.
.afloat:left;width:30%
两个 div 并排（再次）[重复]
【中文标题】两个 div 并排（再次）[重复]【英文标题】：two divs side by side (again) [duplicate] 【发布时间】：2018-02-19 12:00:38 【问题描述】：我已经阅读了无数关于这个主题的帖子，但是我还没有找到一个有效的解决方案。我只想让两个 div 并排排列，LHS div 是 FA 字符的宽度，RHS div 是余数。
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
【问题讨论】：
【参考方案1】：不确定您要做什么，但您可以使用 JS fiddle here 中的 Flexbox 之类的东西。
您也可以这样做：
HTML
<div class="helper">
<div class="text-info">FA</div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
CSS
.text-info, .text-muted
float:left;
.helper
clear:both;
如果您希望它们具有不同的宽度，您可以简单地设置它们的宽度（使用%、px 或其他）。
【讨论】：
这对我不起作用。仍然放在另一个下面的 div 上。 您在任何容器上是否有任何边距或填充？因为如果你这样做了，那么你需要调整宽度，因为 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/… 盒子模型【参考方案2】：将display:table-cell 设置为您的内容，图标将提供所需的输出。检查下面的sn-p。
.inline
display: table-cell !important;
width: auto;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span>
<div class="text-muted inline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel.
Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>【讨论】：
谢谢，但是这个解决方案有我想避免的文本换行。 我没有找到任何自动换行，你能具体说一下吗？ 文本从图标右侧开始，但第二行文本位于图标下方。我希望将这两个项目有效地放在相邻的两列中。 检查更新的。那么你应该使用display: table-cell。
@RaJeshRiJo：现在你只是在复制我的答案，RaJesh：-p【参考方案3】：
我相信这就是你想要的：
.text-muted
display: table-cell;
.text-info
padding-right: 10px;
display: block;
float: left;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>另见this Fiddle。
【讨论】：
是的，这应该可以。 +1 这是最接近任何建议解决方案的方法。由于 FA 图标的大小，文本当前被降级，是否可以让文本更靠近顶部？ @Dercni ：您可能想尝试float : left 为.text-info 和display: table-cell; 为.text-muted。见this demo!
@Dercni ：我根据您的其他要求更新了我的答案！以上是关于div并排,如何实现手动拉伸宽度,两个div同时变化的主要内容，如果未能解决你的问题，请参考以下文章
两个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。