Html 边界和流动布局的问题_Html_Css

Html 边界和流动布局的问题

html css

Html 边界和流动布局的问题,html,css,Html,Css,我试图制作一个有边框的流畅网页，但当我使用css使其流畅时，外部的正确边框就不合适了 HTML代码： <!DOCTYPE html> <html> <body> <div class="gridContainer clearfix"> <div id="LayoutDiv1">

我试图制作一个有边框的流畅网页，但当我使用css使其流畅时，外部的正确边框就不合适了

HTML代码：

<!DOCTYPE html>
                <html>
                <body>
                    <div class="gridContainer clearfix">
                    <div id="LayoutDiv1">
                    <div id="container">
                        <header>
                            <h1>Heading 1</h1>
                            <h2>Heading 2</h2>
                        </header>
                        <nav>
                            <ul>    
                                <li><a href="index.html">Home</a></li>  
                                <li><a href="link1.html">Link 1</a>
                                    <ul>
                                        <li><a href="gallery1.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a href="link2.html">Link 2</a>
                                    <ul>
                                        <li><a href="gallery2.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a href="link3.html">Link 3</a>
                                    <ul>
                                        <li><a href="gallery3.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a href="link4.html">Link 4</a></li>
                            </ul>
                        </nav>

                        <section>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

                        </section>
                        <footer>
                            <p>&copy; Test</p>
                        </footer>
                    </div>
                    </div>
                    </div> 
                </body>
                </html>

最后，流体网格代码：

        img, object, embed, video {
            max-width: 100%;
        }
        /* IE 6 does not support max-width so default to width 100% */
        .ie6 img {
            width:100%;
        }

        /* Mobile Layout: 480px and below. */

        .gridContainer {
            margin-left: auto;
            margin-right: auto;
            width: 87.36%;
            padding-left: 1.82%;
            padding-right: 1.82%;
        }

        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
        }

        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

        @media only screen and (min-width: 481px) {
        .gridContainer {
            width: 90.675%;
            padding-left: 1.1625%;
            padding-right: 1.1625%;
        }
        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
            border:1px solid #000000;
        }
        }

        /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

        @media only screen and (min-width: 769px) {
        .gridContainer {
            width: 88.2%;
            max-width: 1232px;
            padding-left: 0.9%;
            padding-right: 0.9%;
            margin: auto;
        }
        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
        }
        }

任何帮助都将不胜感激

我从容器元素中删除了98%，现在看起来还可以

#container{
    background:#228b22;
    float:left;
    border:1px solid #000000;
}

看看这本书

您不应该/不需要设置内部元素的固定宽度，因为如果设置了填充物和边距，它们可能会溢出外部容器。只需将页眉、剖面和导航的宽度保留为“自动”，并用边距控制它们的宽度。

我不确定您要查找的最终结果是什么。您的容器div有98%的宽度，这就是为什么它没有完全填充其包含div，以及为什么外部元素的边界在外部。也许你想在上面用100%的宽度？我刚刚意识到并改变了这一点。但仍然存在一些问题。如果您更改窗口大小并将其缩小，导航/标题/剖面框的宽度开始超过容器分区的宽度，分区内的所有内容都不再居中。我看了看，但当您调整窗口大小时，它仍然会熄灭。我尝试了此操作，结果导致所有框的大小都不同

#container{
    background:#228b22;
    float:left;
    border:1px solid #000000;
}