移动设备上没有正确堆叠两个DIV元素

Question

我的CSS和HTML无效。 div2应在div1下方呈现，但它不适用于移动设备。

＆＃13;

＆＃13;

#div1 {
    width:100%
}

#div2 {
    width:100%;
}

＆＃13;

<div id = "main">
    <div id = "div1">
        
    </div>
    
    <div id = "div2">
         
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

div {
   display:inline-block
}
#div1 {
  width: 100%
}

#div2 {
  width: 100%;
}

＆＃13;

<div id="main">
  <div id="div1">

  </div>
  <div id="div2">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使divs diplay inline：block应解决问题

Answer 2

试试这个

#div1,#div2 {
   width: 100%
   display:inline-block;
   vertical-align: top;
}