动态拆分3格

我需要三个格来动态拆分容器的空间，具体取决于它们的显示属性。如果显示全部三个，则用户应该看到三个同样分割的div（1/3，1/3，1/3）。如果只显示两个，则用户应该看到1/2和1/2。如果只有一个可见，那么它应该填充所有的容器空间。动态拆分3格

来源

2012-08-14 user1598677

您可以使用jQuery

<html> 
<head> 
    <title>equal div</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <style type="text/css"> 
     body{margin: 0; padding: 0;} 
     #container{width: 100%, height: 100%;background: #666;} 
     #container div{ float: left; border: 1px solid #000; margin: -1px; background: red} 
    </style> 
    <script type="text/javascript"> 
    $().ready(function(){ 
     var c = $('#container').children('div').length; 
     $('#container').children().css('width', 100/c+'%'); 
    }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
    </div> 
</body>

希望它能帮助。

来源

2012-10-28 00:31:05 Cesar

动态拆分3格

回答

相关问题