0

表示プロパティに応じてコンテナーのスペースを動的に分割するには、3 つの div が必要です。3 つすべてが表示される場合、ユーザーには 3 つの均等に分割された div (1/3、1/3、1/3) が表示されます。2 つしか表示されない場合、ユーザーには 1/2 と 1/2 が表示されます。1 つしか表示されていない場合は、すべてのコンテナー スペースを埋める必要があります。

4

1 に答える 1

4

あなたは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-28T00:31:05.637 に答える