文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在css和html中响应的左右图像

问在css和html中响应的左右图像
EN

Stack Overflow用户
提问于 2019-03-27 15:00:26
回答 4查看 1.5K关注 0票数 1

我正在建立一个固定的左右图像和内容在中间的登陆页。在桌面视图中，它工作得很好，但在移动视图中，图像与内容重叠。我该如何解决这个问题？

代码语言：javascript
复制
    <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>
代码语言：javascript
复制
.left{ 

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

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

在桌面视图中

​

在移动视图中

​

如何在移动和平板电脑视图中修复此问题。

html
css
laravel
javascript
php
EN

回答 4

Stack Overflow用户

发布于 2019-03-27 16:21:34

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<!-- 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索引。另一种方法是使用媒体选择器，它允许您针对不同的屏幕大小拥有不同的css属性

示例：

代码语言：javascript
复制
@media (min-width:1281) {
    image {
        width:200px;
    }
}
@media (max-width:1280) {
    image {
        width:100px;
    }
}

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

如果需要有关z索引的更多信息，请访问here

我希望这就是你要找的。

祝好运。

票数 1
EN

Stack Overflow用户

发布于 2019-03-27 15:30:02

在这些图像上设置Z索引。诀窍是内容需要比图像更高的位置。

示例：

索引{z- .img_class：-1}

票数 0
EN

Stack Overflow用户

发布于 2019-03-27 16:25:25

如果您在.left和.right类的z索引之后指定!important关键字，然后在.container类上显式地设置更高的z索引，则似乎可以正常工作。

代码语言：javascript
复制
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>plantshop.me</title>
        <link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
        <style>
            .left{ 
                z-index: -1!important;
                left: 0;
                width: 150px;
                height: 100%;
                position: fixed;
            }

            .right{
                z-index: -1!important;
                top: 0px; 
                right: 0;
                /*width: 150px;*/
                height: 100%;
                position: fixed;
            }

            .layout-image{
                height: 100%
            }

            .container{
                z-index:2!important;
            }

        </style>
    </head>
    <body>

        <div class="left"><img src="images/left.png" class="img-responsive layout-image" ></div>

        <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="https://plantshop.ae/"> <img src="images/right.png" class="img-responsive layout-image" /></a></div>


    </body>
</html>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55371468

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档