整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
最近个人项目需要实现一个左右分栏且左右宽度可以手工拖动调节的web页面，这里记录下实现过程，效果如下图，整个web页面包含左右两个分栏，中间是个4px像素的拖动条，鼠标移动到上面可以左右拖动改变左右分栏的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>web分栏宽度可调节示例</title>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="resize"></div>
<div id="right">right</div>
</div>
<script src="resize.js"></script>
</body>
</html>body {
margin: 0;
overflow-y: hidden;
}
#container {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
#left {
width: calc(30% - 4px);
background-color:indianred;
}
#resize {
width: 4px;
height: 100vh;
cursor: ew-resize;
}
#resize:hover {
background-color: blue;
}
#right {
width: 70%;
/* height: 100vh; */
background-color:green;
}站制作中主要包括上下、左右以及混合分栏的排版模式，分栏式页面现在是网站设计中常见的一种，它可以将网站展现的更美观，内容看上去井然有序。在今天的内容中，小编将详细介绍下分栏式页面设计的要求。
1.页面设计时要将主次分清，不要一味的追求漂亮而违反了页面设计的规则，特别要注意的是不要影响用户的浏览体验。
2.用心创意设计，一般来说左右分栏的网站看上去板块会很少，如果我们通过创新设计，将页面更为丰富，这样用户在浏览网站时就不会觉得死板了。
3.除了在内容上左右分栏可以大幅度交替变换，整体的格调也不能区分得过于明显，否则会显得格格不入，最好让整个页面保持该有的视觉平衡感。
4.导航设计要求，不管采用是文字还是图片的导航形式，都可以利用分栏充分体现，考虑到用户对网站的视觉效应，小编认为在分栏中利用图片导航指引效果会更好。
5.做到左右互补的形式，用户在浏览网站时，由于页面设计左右互补，那么浏览一侧内容的同时就不会遗漏另一侧的内容，甚至会引发用户对网站内容的思考。
总结：分栏设计从内容和结构上来说比普通的设计都要自由得多，两侧既独立又紧密相连，所以，尽量发挥出我们的想象和创意，将好的作品展现到用户面前。
原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2493.html
天来说说网页中实现三栏布局要如何实现的问题，做法有好多，这里就总结4中常用的方法，感兴趣的小伙伴可以看看。
若不是等分分栏的话，一般用得最多的应该是浮动方法，运用浮动做法时候要注意浏览器的兼容性！
展示代码:
*请认真填写需求信息，我们会在24小时内与您取得联系。
