Question

我正在尝试在桌面上创建一个并排显示两个图像的页面，然后将这些图像堆叠起来用于移动设备。我正在使我的浏览器窗口更小以模拟更小的屏幕。图像未在移动设备上堆叠。这是我的HTML：

<div class="container-lp">
    <div class="col-2-lp">
      <h4><a href="#">Interior Decorating</a></h4>
      <div class="overlay">
        <a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" /></a>
      </div>
      <div class="overlay"></div>
    </div>
    <div class="col-2-lp last-lp">
      <h4 class="landing-page"><a href="#">Home Staging</a></h4>
      <div class="overlay">
        <a href="#"><img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" /></a>
      </div>
    </div>
  </div>

这是我的桌面CSS：

.container-lp {
  width: 100%;
  max-width: 1280px;
  min-width: 320px;
  margin: 0 auto;
  clear: both;
}

.col-2-lp {
  float: left;
  width: 45%;
  margin-right: 5%;
}

.last-lp {
  margin-right: 0;
}

.col-2-lp img {
  width: 100%;
}

我的媒体查询：

@media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
  .col-2-lp {
    width: 100%;
    float: none;
    margin: auto;
  }
  .last-lp {
    margin-right: auto;
  }
}

Answer 1

您的代码没有问题。您无法在PC浏览器上测试设备媒体查询，请尝试此操作

<xh:a target="_blank"
      href="{concat('http://www.someurl.nl/new?code=', $x131573079)}">
    linkwithcode
</xh:a>

Answer 2

如果您需要此功能，我建议您查找引导程序。你可以在不触及CSS的情况下实现同样的目的：

<div class="container">
    <div class="row">
        <div class="col-sm-6"><img src="#"></div>
        <div class="col-sm-6"><img src="#"></div>
    </div>
</div>

Answer 3

以下是一个例子：

将所有内容设置为100％，然后将某个宽度设置为50％，然后将它们并排放置。

.image {
  width: 100%;
}

@media screen and (min-width: 780px) {
  .image {
    width: 50%;
  }
}

这是一个显示简单示例的jsfiddle

使图像堆栈移动

3 个答案: