2 column flexible layout

问题

I have 2 column structure. The CSS used are as follows:

.div-left
{
position: relative;
float: left;
width: 18%;
margin: 1;
}

.div-right
{
position: relative;
float: right;
width: 81%;
margin: 0;
}

I want a flexible structure in the sense, when one column is collapsed other should automatically take up space.

I am trying to hide first column as shown below:

$("#test").animate({width: 'toggle'});

This is hiding my First column, but the right column is not taking the space released by first column.

I took the javascript to toggle from here (http://www.learningjquery.com/2009/02/slide-elements-in-different-directions).

Any help on this would be appreciated.

回答1:

Another solution: use CSS transitions (I'm mentioning it because you list CSS3 in your tags) and .expanded/ .collapsed classes. Then use jQuery just to toggle the classes.

demo (click on a column to make it expand/ come back to initial width)

HTML:

<div class='left'></div>
<div class='right'></div>

CSS:

* { margin: 0; }
div { min-height: 10em; transition: linear 1s; }
.left {
  float: left;
  width: 18%;
  background: crimson;
}
.right {
  float: right;
  width: 81%;
  background: dodgerblue;
}
.expanded { width: 100%; }
.collapsed { width: 0%; }

jQuery:

$('div').click(function(){
    $(this).toggleClass('expanded').siblings().toggleClass('collapsed');
});

来源：https://stackoverflow.com/questions/12478597/2-column-flexible-layout