Question

在600像素或更小的屏幕上看时，我试图使左框和右框垂直堆叠。我可以让导航栏做到这一点。但是，我无法让盒子做导航栏正在做的事情。浮动的width和max-width似乎无济于事，也许我用错了吗？我想要的目标是使右框出现在左框下方，且没有重叠且没有溢出。

.topnav {
  background-color: pink;
  overflow: hidden;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.sidebar {
  background-color: #fff5db;
  width: 20%;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  position: absolute;
}

.links-box {
  background-color: none;
  width: 100%;
  border: 1px solid black;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  padding: 10px;
}

.right-content {
  background-color: #fff5db;
  position: relative;
  left: 21%;
  max-width: 79%;
  position: absolute;
  right: 0px;
}

@media only screen and (max-width: 600px) {
  #logo {
    max-width: 100%;
  }
  .topnav {
    float: none;
    max-width: 100%;
  }
  .topnav a {
    float: left;
    width: 100%;
    padding: none;
  }
  .sidebar {
    max-width: 100%;
    width: 100vw;
    float: left;
    clear: both;
    box-sizing: content-box;
  }
  .introduction {
    max-width: 100%;
    width: 100%;
    float: left;
  }
  .right-content {
    max-width: 100%;
    width: 100%;
    float: left;
  }
}

<div class="topnav">
  <a href="">link1</a>
  <a href="">link2</a>
  <a href="">link3</a>
  <a href="">link4</a>
  <a href="">link5</a>
  <a href="">link6</a>
</div>


<div class="sidebar">
  <div class="links-box">left box</div>
</div>

<div class="right-content">right box</div>

（fiddle）

Answer 1

需要在媒体查询中同时为 .sidebar 和 .right-content 制作position: static。

P.S：我不确定您要达到的目标，但我认为您不必要地弄乱了position属性。

Answer 2

解决方案最终是重做我的代码，以使用'flex'属性和'justify-content：center'将两个盒子并排放置，而不是使用绝对定位手动放置它们。

在那之后使用媒体查询要容易得多。

使用媒体查询时，Div不适合浏览器的宽度

2 个答案: