How can I make an my HTML columns adjustable width?
I have a HTML application that works with three columns, each of which is a div in a container object.
| |
A | B | C
| |
I'd like to make it such that the three columns would each be adjustable, and the text would reflow and adjust inside of them.
This works trivially with Frames (See: http://www.tizag.com/pics/htmlT/frameindex.html ), but I'd like to replicate this behavior with my Divs.
Is there a jQuery plugin to do this? The best way I can think of is to create a slider div betwee开发者_开发知识库n the contents, similar to the implementation at http://www.catchmyfame.com/2010/08/12/adjustable-columns-with-jquery/
Is there any easier/cleaner/prettier way? This seems like it has to be a pretty standard request...
A rudimentary way to set them up all the same width:
div {
float: left;
width: 33%;
height: 300px;
overflow: scroll;
}
If you want to allow the user to resize the columns with a drag-n-drop method then you'll want to look into a JS framework. Here's a jQuery example:
http://docs.jquery.com/UI/API/1.8/Resizable
精彩评论