2列灵活布局 [英] 2 column flexible layout

问题描述

我有2列结构。使用的CSS如下：

  .div-left 
 {
 position：relative; 
 float：left; 
 width：18％; 
 margin：1; 
} 
 
 .div-right 
 {
 position：relative; 
 float：right; 
 width：81％; 
 margin：0; 
} 
  

我想要一个灵活的结构，自动占用空间。

我试图隐藏第一列，如下所示：

 code> $（＃test）。animate（{width：'toggle'}）; 
  

这隐藏了我的第一列，但右列不占用第一列释放的空间。

我使用javascript从这里切换（http://www.learningjquery.com/2009/02/slide-elements-in-different-directions）。<

解决方案

另一个解决方案：/ p>

使用CSS转换（我提到它，因为你在你的标签中列出CSS3）和 .expanded / .collapsed 。然后使用jQuery切换类。

演示 （点击某个列可展开/返回初始宽度）

HTML：

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

CSS：

  * {margin：0; } 
 div {min-height：10em;过渡：线性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'）; 
 }）; 
  

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.

解决方案

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');
});

这篇关于2列灵活布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！