動態拆分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

回答

相關問題