Html <；部门>；在调整窗口大小时向下移动_Html_Css

Html <；部门>；在调整窗口大小时向下移动

html css

Html <；部门>；在调整窗口大小时向下移动,html,css,Html,Css,我的右分区有问题。当我调整浏览器窗口的大小时，它会停留在右侧，但当我达到某个大小时，它会下降到其他分区的下方，并继续压缩其中的文本当我调整浏览器窗口的大小时，如何使正确的部分保持在原位 CSS: #wrapper { background-color: #fff; margin: 80px auto auto auto; max-width: 1300px; border: 2px solid #5B5B5B;

我的右分区有问题。当我调整浏览器窗口的大小时，它会停留在右侧，但当我达到某个大小时，它会下降到其他分区的下方，并继续压缩其中的文本

当我调整浏览器窗口的大小时，如何使正确的部分保持在原位

CSS:

    #wrapper {
        background-color: #fff;
        margin: 80px auto auto auto;
        max-width: 1300px;
        border: 2px solid #5B5B5B;
        padding: 20px;
        box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
        border-radius: 20px;
    }

    #container {
        background-color: #fff;
        overflow: auto;
    }

    #header {
        margin: 0;
    }

    #logoarea {
        position: absolute;
        top: 3%;
        left: 46%;
    }

        #logoarea img {
            border-radius: 50%;
            border: 4px solid rgba(155,155,155,0.7);
        }

    #header {
        margin: 0;
    }

        #header h1 {
            margin: 0;
            text-align: left;
            font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
            font-size: 22px;
            color: #000000;
            padding: 1%;
            text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
        }

    nav {
        margin: 0;
        width: 290px;
        float: left;
    }

    #right_section {
        margin: 0px 0 0 6px;
        width: 74%;
        float: right;
        height: auto;
        position: relative;
        overflow: relative;
    }

        #right_section p {
            padding: 20px;
        }

    #footer {
        margin: 0;
    }

        #footer p {
            margin: 0;
            text-align: center;
            font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
            font-size: 12px;
            padding: 2% 0%;
        }

<body>
<!--Start Wrapper-->
    <div id="wrapper">
        <!--Start Container-->
            <div id="container">
                <!--Start logoarea-->
                    <div id="logoarea">
                        ...
                    </div>
                <!--End logoarea-->
                <!--Start header-->
                    <div id="header">
                    ...
                    </div>
                <!--End header-->
                <!--Start Nav-->
                    <nav>
                    ...
                    </nav>

                   <div id="right_section">

                   </div>

            </div>
            <!--End container-->
      </div>
      <!--End wrapper-->
</body>

HTML:

    #wrapper {
        background-color: #fff;
        margin: 80px auto auto auto;
        max-width: 1300px;
        border: 2px solid #5B5B5B;
        padding: 20px;
        box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
        border-radius: 20px;
    }

    #container {
        background-color: #fff;
        overflow: auto;
    }

    #header {
        margin: 0;
    }

    #logoarea {
        position: absolute;
        top: 3%;
        left: 46%;
    }

        #logoarea img {
            border-radius: 50%;
            border: 4px solid rgba(155,155,155,0.7);
        }

    #header {
        margin: 0;
    }

        #header h1 {
            margin: 0;
            text-align: left;
            font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
            font-size: 22px;
            color: #000000;
            padding: 1%;
            text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
        }

    nav {
        margin: 0;
        width: 290px;
        float: left;
    }

    #right_section {
        margin: 0px 0 0 6px;
        width: 74%;
        float: right;
        height: auto;
        position: relative;
        overflow: relative;
    }

        #right_section p {
            padding: 20px;
        }

    #footer {
        margin: 0;
    }

        #footer p {
            margin: 0;
            text-align: center;
            font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
            font-size: 12px;
            padding: 2% 0%;
        }

<body>
<!--Start Wrapper-->
    <div id="wrapper">
        <!--Start Container-->
            <div id="container">
                <!--Start logoarea-->
                    <div id="logoarea">
                        ...
                    </div>
                <!--End logoarea-->
                <!--Start header-->
                    <div id="header">
                    ...
                    </div>
                <!--End header-->
                <!--Start Nav-->
                    <nav>
                    ...
                    </nav>

                   <div id="right_section">

                   </div>

            </div>
            <!--End container-->
      </div>
      <!--End wrapper-->
</body>


...
...
...

提前感谢您提供的所有帮助。

您可能需要使用css属性

 white-space: nowrap;

将

nav{margin:0；宽度：290px；float:left；}

更改为

nav{margin:0；宽度：26%；float:left；}

将

#right_section{margin:0px 0 0 6px；}

更改为

#right_section{margin:0px 0 0 0px；}

我认为问题的主要部分是数学：

外壳（又名包装）：最大宽度：1300px

左侧（又名导航）：

宽度：290px


右侧：边距：0px 0 6px+宽度：74%

在某一点上，290px大于（1300px减去（74%加6px））
所以有两件事。

1.左侧为百分比：宽度：24%

2.但是，如果不补偿边距
，这将不起作用，因此将右侧更改为边距：0px 0 6px+宽度：计算（74%-6px）
我不知道你需要支持哪些浏览器，但你应该参考
尽管如此，这是一个使用display:flex与


HTML:

标志区
标题
主导航
右侧部分

CSS:
#包装器{
背景色：#fff；
保证金：80px自动；
最大宽度：1300px；
宽度：100%；//可能尝试以百分比表示正确的节宽度？它已经有：宽度：74%的空白不起作用。它只是将文本以直线方式扔到右#节中。您可以在#容器或位置：绝对；在#右#节和右：0+位置：相对在#容器最远：）上使用最小宽度来保持右#节在调整大小时从页面跳转下来。现在，如果我调整的足够大，它将正好位于导航部分的顶部…如何使它在某个点停止，并保持导航和右U部分完全可见而不重叠？将css最小宽度：300px添加到#包装器中。您可以将该值调整为200px或400px，这取决于导航显示的时间帮助所有…与任何值添加最小宽度：300px到#containermin width:1000px；因为容器似乎有理想的效果…在大多数页面：）谢谢这个Jason…我会花一些时间阅读并尝试一下。（快速剪切和粘贴搞糟了：）