html - 当导航在屏幕调整大小时发生变化时将 div 移动到另一个下

Question

我希望我的 main-content div 移动到我的导航栏下方，它在屏幕调整大小时重新变成水平导航栏。

我假设像这样简单的东西会起作用:

@media screen and (max-width: 540px) {
    #main-content{
    display:block;
    width:100%;
    }
} 

但是两个 div 并排显示。我怎样才能让我的 main-content 在我的导航栏变成水平栏后立即移动到它下面？

以下是我目前演示该问题的方法:

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* NAVIGATION */

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  padding: 0px;
}

.nav ul li {
  margin-left: 5px;
  list-style-type: none;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover a {
  color: #f4f3f3;
}


/* MAIN CONTENT */

#main-content {
  float: left;
  margin: 10px;
  border: 1px solid black;
  width: 80%;
  height: 500px;
}

@media screen and (max-width: 540px) {
  #main-content {
    display: block;
    width: 100%;
  }
}

.reg-div {
  border: 1px solid red;
  width: 80%;
}

.reg-div ul li {
  list-style: none;
  text-decoration: none;
  color: #333;
}


/* MEDIA QUERIES */

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
}

<div class="site-wrapper">
  <!-- NAV-CONTAINER - LEFT OF PAGE -->
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" width="150px" height="150px" src="" alt="logo here" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul class="nav-ul">
          <a class="nav-link active" href="">
            <li>test 1</li>
          </a>
          <a class="nav-link " href="">
            <li>test 2</li>
          </a>
          <a class="nav-link" href="">
            <li>test 3</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
  <!-- NAV-CONTAINER END -->

  <div id="main-content">
    <div class="reg-div">
      <ul>
        <li><a href="">Login</a> | <a href="">Sign Up</a></li>
      </ul>
    </div>
    <!-- MAIN CONTENT END -->
  </div>

JS fiddle :https://jsfiddle.net/gtLhje4z/

Answer 1

由于您已将 .site-wrapper 设置为 flexbox，因此请为包装器添加一个媒体查询并使其成为 flex-direction: column at 最大宽度:540 像素。默认情况下，flexbox 设置为在一行中。

此外，您不需要 float “#main-content”，因为 flexbox 会为您完成所有工作。

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}

@media screen and (max-width: 540px) {
    .site-wrapper {
        flex-direction: column;
    }
}


/* NAVIGATION */

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  padding: 0px;
}

.nav ul li {
  margin-left: 5px;
  list-style-type: none;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover a {
  color: #f4f3f3;
}


/* MAIN CONTENT */

#main-content {

  margin: 10px;
  border: 1px solid black;
  width: 80%;
  height: 500px;
}

@media screen and (max-width: 540px) {
  #main-content {
    display: block;
    width: 100%;
  }
}

.reg-div {
  border: 1px solid red;
  width: 80%;
}

.reg-div ul li {
  list-style: none;
  text-decoration: none;
  color: #333;
}


/* MEDIA QUERIES */

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
}

<div class="site-wrapper">
  <!-- NAV-CONTAINER - LEFT OF PAGE -->
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" width="150px" height="150px" src="" alt="logo here" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul class="nav-ul">
          <a class="nav-link active" href="">
            <li>test 1</li>
          </a>
          <a class="nav-link " href="">
            <li>test 2</li>
          </a>
          <a class="nav-link" href="">
            <li>test 3</li>
          </a>
        </ul>
      </nav>
    </div>
  </div>
  <!-- NAV-CONTAINER END -->

  <div id="main-content">
    <div class="reg-div">
      <ul>
        <li><a href="">Login</a> | <a href="">Sign Up</a></li>
      </ul>
    </div>
    <!-- MAIN CONTENT END -->
  </div>