开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜