Question

我的div里面有图片。现在在桌面版上，一切都很棒。但在移动版本上，我希望它们能够在另一个下方显示，但我无法使其正常工作。你能帮助我吗？这是一个来自桌面版divs样式的示例代码

#leftcolumn {

width:  300px;
height: 200px;
border: 1px solid red;
display: block;
text-align: center;
vertical-align: middle;
margin-bottom: 20px;   
}


#rightcolumn {

width:  300px;
height: 200px;
border: 1px solid red;
display: block;
text-align: center;
vertical-align: middle;
margin-top: -220px;
margin-left: 330px;
margin-bottom: 20px;
}

正如您在我的桌面版本上看到的那样，我每行显示两个（左侧和右侧），但在我的移动版本（最大宽度：736）上，我希望它们显示在另一个下方。

Answer 1

在移动设备上堆叠东西的最简单方法是将宽度设置为100％。

执行此操作的最佳方式是以移动设备方式设置元素width: 100%;，然后使用媒体查询在视口大小增加时更改宽度，如下所示：

＆＃13;

section {
  width: 100%;
}

@media (min-width: 800px) {
  section {
    float: left;
    width: 50%;
  }
}

＆＃13;

<section>
  <p>Section 1</p>
</section>
<section>
  <p>Section 2</p>
</section>

＆＃13;

在移动版本上显示带有一个在另一个下面的图像的div

1 个答案: