A captura de tela é a seguinte: (Você pode alterar a largura dos divs de ambos os lados movendo a barra azul no meio)
O código de implementação específico é o seguinte:
< %@ Página de página = "c#" autoeventwireup = "true" codefile = "default10.aspx.cs" herits = "default10" %> <! Doctype html public "-// w3c // dtd xhtml 1.0 transitório // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w.w3.org/1999/xhtml"> <head = "1 "1 "". type = "text/javascript" src = "jQuery 2.0.3.js"> </script> <style type = "text/css"> .highlightTextSearch {background-color: vermelho; } a: hover {color: vermelho; } .style2 {width: 1000px; } .div {scrollBar-face-color: #dcdcdc; /* Cor do cursor*/ scrollbar-shadow-color: #99BBE8; /* Cor de borda cursor*/ scrollbar-highlight-color: #ff3300; /* Destaque do cursor*/ scrollBar-3dlight-color: #9ebfe8; ScrollBar-Darkshadow-Color: #9ebfe8; scrollbar-rack-color: #dfe8f6; /*Barra de fundo deslizante cor*/ scrollbar-arrow-cor: #6699ff; /*Arrow Color*/} </style> </ad Head> <body> <formig id = "form1" runat = "server"> <div> <table align = "central" CellPadding = "0" CellPacing = "0"> <tr> <td align = "esquerd" = "top"> <divindade = "Overflow; Amarelo "id =" movemodule "> </div> <div id =" Arrowborder "Style =" Float: Left; </tr> </tabela> </div> <script type = "text/javascript"> var isdown = false; var minwidth = 160; var maxwidth = 800; $ ("#Arrowborder"). Mousedown (function () {this.setCapture (); isdown = true; $ ("corpo"). css ("cursor", "e-resize");}); $ ("corpo"). mouseUp (function () {this.ReleasecApture (); isdown = false; $ ("corpo"). css ("cursor", "padrão");}); $ ("corpo"). mousemove (function (event) {if (isdown) {var _mx = event.clientX; // var _my = event.clienty; var _poin = $ ("#Arrowberder"). = $ ("RightFrame"). Width (); {if (_w> 0) {$ ("#movemodule"). Largura (maxwidth); minwidth)); </script> </morm> </body> </html>