Question

我希望我的main-content div移动到我的导航栏下，该栏会在屏幕上重新调整为水平导航栏。

我认为这样简单的事情会起作用：

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

但两个div都是并排显示的。如果我的main-content变成水平条，我怎么能让它在我的导航栏下移动？

以下是我目前展示此问题的方法：

＆＃13;

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

＆＃13;

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

＆＃13;

JS小提琴：https://jsfiddle.net/gtLhje4z/

Answer 1

由于您已将.site-wrapper设置为flexbox，因此请为包装器添加媒体查询，并在flex-direction: column添加max-width: 540px。默认情况下，flexbox设置为一行。

此外，您不需要浮动您的＃main-content＆＃39;因为flexbox可以为你完成所有工作。

＆＃13;

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

＆＃13;

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

＆＃13;

当屏幕上的导航更改调整大小时，在另一个下移动div

1 个答案: