2列灵活布局

本文介绍了2列灵活布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有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列灵活布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！