Question

我的项目中存在问题：

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

我在css中使用desctop @media（min-width：768px）选项显示块并向左浮动。首先是70％，第二个30％。在移动设备中，我需要100％宽度，并且需要在顶部div1上显示div2。向前漂浮，向左漂浮第二个不起作用。需要你的帮助。

Answer 1

这个怎么样？ Flex框允许您指定它的方向，如果您真的很挑剔，您可以在项目本身上指定订单号。

＆＃13;

#container {
  display: flex;
}

#div2 {
   width:30%;
   height:300px;
   background:red;
}

#div1 {
   width:70%;
   height:300px;
   background:green;
}

@media only screen and (max-width: 768px) {
  #div1, #div2{
    width: 100%;
  }
  #container {
    flex-flow: column-reverse;
  }
}

＆＃13;

<div id="container">
  <div id="div1">1</div>
  <div id="div2">2</div>
</div>

＆＃13;

Answer 2

如果你想在顶部使用div2，你的html必须在div1

之上移动div2

#div2 {
   width:30%;
   height:300px;
   background:red;
   float:right
}

#div1 {
   width:70%;
   height:300px;
   background:yellow;
   float:left
}

@media only screen and (max-width: 768px) {
#div1, #div2 {
  width:100%;
}
}

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

div块的位置（简单css问题）

2 个答案: