Question

HEADER div是网站的内容。其宽度是实际屏幕尺寸的80％，并且也位于屏幕中央。

这是HTML代码。我想要的是当屏幕尺寸较小时，“一个” div高于“两个” div。当您在计算机上打开网站时，两个div必须彼此相邻，但是例如，当窗口为320px时，两个div必须彼此重叠（就像经典的响应式设计一样）

这是代码：

#header {
width: 88%;
margin: 0 auto;
-webkit-box-shadow: -2px 2px 80px -10px #0B0B3B;
-moz-box-shadow: -2px 2px 80px -10px #0B0B3B;
box-shadow: -2px 2px 80px -10px #000;
}

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 320px) {
    body {
        background-image: url("http://localhost/wordpress/wp-content/uploads/2018/07/max-width479.png");
    }

    #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

<div id="header"> 
    <div class="wrapper">
       <div id="one">one</div>
       <div id="two">two</div>
   </div>
</div>

Answer 1

使用语法

@media only screen and (max-width:320px){/your css here}

希望它将解决问题。

Answer 2

尝试添加display:block;和width:100%而不是自动添加

@media screen and (max-width: 320px) {
    #one {
    display:block;
    width:100%;
    float:none;
    //other stuff..
    }
}

Answer 3

以下是该概念的一个可行示例：
https://codepen.io/mikeabeln_nwea/pen/ZRgKwv

问题部分是由您使用的float引起的。 float几乎总是会导致问题，因为它会从DOM顺序中删除该元素，在这种情况下，您是不需要的。

您想要做的是，当您希望两个display: inline-block彼此相邻时使用div，然后在您希望两个display: block媒体查询该语句div个标签要堆叠。

您遇到的另一个问题是将文本直接放在div标记中。您想将它们用作文本元素的容器，例如在我的示例中使用的p标签。

CSS文件：

.header {
   width: 88%;
   margin: auto;
   -webkit-box-shadow: -2px 2px 80px -10px #0B0B3B;
   -moz-box-shadow: -2px 2px 80px -10px #0B0B3B;
   box-shadow: -2px 2px 80px -10px #000;
}

.wrapper{
   width: 100%;
}

.box{
   vertical-align: top;
   display: inline-block;
   box-sizing: border-box;
   height: 170px;
}

.one {
   background-color: gray;
   width: 20%;
}

.two { 
   background-color: white;
   width: 79%;
   border:2px dashed #ccc;
}

@media screen and (max-width: 768px) {
   .box{
      display: block;
   }

   .one {
      width: 100%;
   }

   .two {
      width: 100%;
   }
}

HTML文件：

<div class="header"> 
  <div class="wrapper">
     <div class="box one">
       <p>one</p>
     </div>
     <div class="box two">
       <p>two</p>
    </div>
  </div>
</div>

希望这会有所帮助！

通过响应式设计将div置于另一个div之下

3 个答案: