0

我在使用这段代码时遇到了一些问题。我想也许你可以帮助我。

首先，我的部分没有填充和边框，因此像素仅用于顶部、左侧、右侧和宽度属性，并且不需要 outerWidth()。

第一个问题：一开始我将body'left'和'right'属性设置在（window_width - 1100 = 180），所以我的body宽度是920px。问题是它不是。它变成了 904。我已经用 chrome 和 mozilla 对其进行了测试。 我不知道丢失的 16 个像素在哪里。

第二：当我调整窗口大小时，我希望我的身体居中，并且我的边距增长得更少，直到身体占据整个窗口。

我的身体没有保持居中，而且只有一个边缘增长得更少。

我发现这是因为 '#content'、'#mainContent'、'aside' 有一个宽度。我有点'需要设置宽度。有什么办法可以让我的窗口中心自己用 jquery 做上面的所有事情吗？

这是我的代码：

<html>
    <head>          
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>     
        <style>
            body{
                position:absolute;          
            }
            #content{
                background-color: green;
            }
            #mainContent{
                background-color: orange; 
            }
            aside{
                background-color: blue;
            }
            .floatLeft{
                float:left;
            }
            .clear{
                clear:both;
            }
        </style>
    </head>
    <body>      
        <section id="content" class="border">
            <section id="mainContent" class="floatLeft" >   
                mainContent
            </section>                      
            <!-- End of main content -->

            <aside class="floatLeft">                               
                aside                   
            </aside>
            <!-- End of aside -->

            <p class="clear"></p>

        </section>
        <!-- End of content -->

        <script type="text/javascript">
            $(document).ready(function(){               
                change_template();
            });
            change_template = function(){

                var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;        

                window_h = $(window).height();
                window_w = $(window).width();

                top = window_h - (window_h - 100);
                left_right = window_w - 1100;

                content_w = window_w - 2*left_right;                
                $('#content').css('width', content_w);

                mcontent_w = content_w - 300;
                $('#mainContent').css('width', mcontent_w);

                aside_w = content_w - mcontent_w;
                $('aside').css('width', aside_w);               

                resize_body(top, left_right, left_right);

                //next three lines are written only for demonstration purpose
                left_right = ($(window).width() - parseInt($('body').css('width')))/2;
                alert('body width: '+$('body').css('width'));//it supposed to be 920
                alert('left propery value: '+left_right);//it supposed to be 180

                $(window).resize(function(){
                    left_right = ($(window).width() - parseInt($('body').css('width')))/2;
                    resize_body(top, left_right, left_right);
                });

            }

            resize_body = function(top, left, right){

                $('body').css('top', top+'px');
                $('body').css('left', left+'px');
                $('body').css('right', right+'px');

            }
        </script>               
    </body>
</html>
4

1 回答 1

0

重置浏览器样式：

html, body {
  margin: 0 auto;
  padding: 0;
}
于 2013-01-11T11:21:08.877 回答