javascript - 在 css 和 html 中响应左右图像

Question

我正在构建一个着陆页，中间有固定的左右图像和内容。在桌面 View 中它工作正常但在移动 View 中图像与内容重叠。我该如何解决这个问题？

    <div class="container">
        <div class="row">
            <div class="col-sm col-lg mt-5 mb-5">
                <div class="text-center">
                    <img src="images/me.svg" class="img-fluid" style="width: 200px">
                </div>
                <div class="text-center" style="  font-family: 'CustomFont',SceneStd-Light;    color: #969595;">
                        UAE’s largest online plant store launching soon in 
                </div>
            </div>
        </div>
        <div class="row pb-5">
            <div class="col-sm text-center">
                <img src="images/bahrain.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
            <div class="col-sm text-center">
                <img src="images/saudi.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
            <div class="col-sm text-center">
                <img src="images/kuwait.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm col-lg mt-5 mb-5">
                <div class="text-center">
                    <a href="#"><img src="images/ae.svg" class="img-fluid" style="width: 200px"></a>
                </div>
                <div class="text-center">
                    <a href="#"><img src="images/uae.svg" style="height: 150px"></a>
                </div>
                <div class="text-center pb-2 pt-2"><span>Visit our UAE store</span></div>
            </div>
        </div>
    </div>
    <div class="right">
    <a href="#">    <img src="images/right.png" class="img-responsive layout-image"  ></a>

    </div>

.left{ 

  left: 0;
  width: 150px;
  height: 100%;
  position: absolute;}

.right{
     top: 0px; 
  right: 0;
  /*width: 150px;*/
  height: 100%;
  position: absolute;}
  .layout-image{height: 100%}

在桌面 View 中

在移动 View 中

如何在移动设备和平板电脑 View 中解决此问题。

Answer 1

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index -->

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

有多种方法可以做到这一点，我的@bpolar 提到了你可以使用 z-index。另一种方法是使用媒体选择器，它允许您为不同的屏幕尺寸设置不同的 css 属性

例子:

@media (min-width:1281) {
    image {
        width:200px;
    }
}
@media (max-width:1280) {
    image {
        width:100px;
    }
}

此代码将针对不同的显示宽度显示不同尺寸的图像，您可以将它们视为 if 语句。这种方法的好处是您可以更好地控制它在不同显示配置上的显示方式。话虽如此，我认为最好的选择是将两者结合起来。

如果您需要有关可以找到的 z-index 的更多信息 here

希望这就是您要找的。

祝你好运。