<DIV>在窗口調整大小上向下移動

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:290px; float:left; } nav{ margin:0; width:290px; float:left; }到nav{ margin:0; width:26%; 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

我認為問題的主要部分是數學：

外殼（又名#wrapper）： max-width: 1300px;
width: 290px; （又稱導航）： 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);

我不知道您需要支持的瀏覽器，但是您應該為calc（）引用canIUse

綜上所述，這是使用display:flex;一個很好的例子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>在窗口調整大小上向下移動

問題描述

3 個解決方案

解決方案1
0 2015-05-27 16:47:12

解決方案2
0 已采納 2015-05-27 16:48:52

解決方案3
0 2015-05-27 17:13:26

<DIV>在窗口調整大小上向下移動

問題描述

3 個解決方案

解決方案1 0 2015-05-27 16:47:12

解決方案2 0 已采納 2015-05-27 16:48:52

解決方案3 0 2015-05-27 17:13:26

解決方案1
0 2015-05-27 16:47:12

解決方案2
0 已采納 2015-05-27 16:48:52

解決方案3
0 2015-05-27 17:13:26