Question

我正在学习CSS。我正在做一个小任务..

我有一个中心盒，当它的宽度，高度发生变化时，它的所有页眉，页脚，左侧边栏，右侧边栏也应相应改变！

我做错了什么。请在下面找到我的代码：

<!doctype html>
<html lang="en">
 <head>

 <script src="jquery-1.10.1.min.js"></script>

 <script>
        var modified_width, modified_height;

        function set_width_height(width,height){
            var width_factor=width/1024;
            var height_factor=height/768;
            var scale_factor=(width_factor>height_factor)?width_factor: height_factor;
            modified_width=width*scale_factor;
            modified_height=height*scale_factor;
            return {width:modified_width, height:modified_height};
        }

        $(document).ready(function(){
             set_width_height(800,480)
    /*      var width2 = 1024 - modified_width;
            var height2 = 768 - modified_height;*/
            $("#id6").css({'width':modified_width, 'height':modified_height});
/*
            $("#id6").css("width",modified_width);
            $("#id6").css("height",modified_height);*/

        //  alert(modified_width)

            width1 = (1024 - modified_width)/2;
            height1 = (768 - modified_height)/2;
            $("#id2").css("width",width1);
            $("#id4").css("width",width1);
            $("#id3").css("height",height1);
            $("#id5").css("height",height1);
        })
 </script>
    <style>
    .inc {
        position:absolute;
        border:1px solid white; 
    }

        #id1{
            width:1024px;
            height:768px;
        }

        #id2{
            left:0;
            top:0;
            bottom:0;
            width:20%;
            height:100%;
            background:red;
        }
        #id3{
            top:0;
            left:20%;
            width:60%;
            height:15%;
            background:pink;
        }
        #id4{
            right:0;
            top:0;
            bottom:0;
            width:20%;
            background:green;
        }
        #id5{
            bottom:0;
            left:20%;
            height:15%;
            width:60%;
            background:yellow;
        }
        #id6{
            top:25%;            
            left:25%;
            width:60%;
            height:70%;         
            background:black;
        }
    </style>
 </head>
 <body>
    <div id="id1" class="mainc">
            <div id="id2" class="inc" >
B
            </div>

        <div id="id3"  class="inc" >
D
            </div>
            <div id="id4"  class="inc">
C
            </div>
            <div id="id5"  class="inc">
E
            </div>
            <div id="id6"  class="inc">
F
            </div>
    </div>
 </body>
</html>

修改 Fiddle

Answer 1

我看不出为什么你需要所有的javascript来获得你想要的布局。如果你真的想学习CSS，你会发现使用css display：table可以获得你想要的布局。看看我的小提琴，让你走向正确的方向。

...

http://jsfiddle.net/ben1/84Zgs/

css div动态问题

1 个答案: