Question

我的right_section div有问题。当我调整浏览器窗口的大小时，它会保持在右侧，但是当我达到一定的大小时，它会下降到其他所有位置，并继续压缩内部的文本。

当我调整浏览器窗口大小时，如何让right_section保持原位？

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%;
        }

HTML：

<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>

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

Answer 1

您可能想要使用css属性

 white-space: nowrap;

Answer 2

将nav{ margin:0; width:290px; float:left; }更改为nav{ margin:0; width:26%; float:left; }

将#right_section {margin: 0px 0 0 6px;}更改为#right_section {margin: 0px 0 0 0px;}

Answer 3

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

SHELL（又名#wrapper）：max-width: 1300px;
LEFT SIDE（又名导航）：width: 290px;
右侧：margin: 0px 0 0 6px; + width: 74%;

在某个时刻，290px大于（1300px减去（74％加6px））;

这两件事。
1.将左侧设为百分比：width:24%;
2.但是在没有补偿margin的情况下，这不会有效，所以将右侧更改为margin: 0px 0 0 6px; + width: calc(74% - 6px);

我不知道您需要支持的浏览器，但您应该参考canIUse for calc()

所有这一切，这是使用display:flex;的一个很好的例子！ CODEPEN

HTML：

<div id="wrapper">
  <div id="container">
    <div id="logoarea">LOGO AREA</div>
    <div id="header">HEADER</div>
    <nav>MAIN NAVIGATION</nav>
    <div id="right_section">RIGHT SECTION</div>
  </div>
</div>

CSS：

#wrapper {
  background-color: #fff;
  margin: 80px auto auto auto;
  max-width: 1300px;
  width:100%; // <== to always fill parent
  border: 2px solid #5B5B5B;
  padding: 20px;
  box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
  border-radius: 20px;
  box-sizing:border-box; // <== puts the padding inside the box
}
#container {
  background-color: #fff;
  display:flex; // <== flex ftw
  flex-wrap:wrap; // <== wrap that flex
}
#logoarea {
  position: absolute;
  top: 3%;
  left: 46%;
}
#header {
  margin: 0;
  width:100%; // <== full width. I assume this was the goal
  background: rgba(255,0,0,0.1); // <== just to see the box
  text-align center; // again, an assumption
}
nav {
  width: 26%;
  background: rgba(0,255,0,0.1); // <== just to see the box
}
#right_section {
  margin: 0px 0 0 6px;
  width: calc(74% - 6px); // <== use calc to compensate for the margin
  background: rgba(0,0,255,0.1); // <== just to see the box
}

<div>向下调整Window Resize

3 个答案: