CSS的class和z-index解决手机自适应

之前出现手机上图片和文字重叠的问题,但是在电脑上没有出现
在这里插入图片描述
然后认清了class和z-index,通过改变数值,和container的参数吗,解决了这个问题,最后让right:0,解决了这个问题,最后附上成功后的代码。

.main-half-layout {
	background: url(../images/ico-tech.jpg) center center no-repeat;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	background-position: center center;
	background-size: cover;
	-webkit-background-size: cover;
}

.main-half-layout-1 {
	background: url(../images/ico-tech-3.jpg) center center no-repeat;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-position: center center;
	background-size: cover;
	-webkit-background-size: cover;
}

.main-half-layout-container {
	position: relative;
	padding: 80px 0;
	padding-left: 20px;
	padding-right: 20px;
	width: 40%;
	margin: 0 5%;
}
.main-half-layout-container.half_right_layout {
	float: left;
	margin-left: auto;
	z-index: 0;
}


.main-half-layout-container.half_left_layout {
	float: right;
	margin-left: auto;
	z-index: 1;
}
      <!-- ABOUT -->
      <section class="about light-bg">
        <!-- Right Background -->
        <div class="main-page-section half_left_layout">
          <div class="main-half-layout-1 half_right_layout"> </div>

          <!-- Left Content -->
          <div class="main-half-layout-container half_right_layout" id="activity">
            <div class="about-us-con">
              <h3>Double-Blind Matching Algorithm</h3>
              <p>ETD is a forerunner in double-blind matching technology to address data security concerns in
                distributed
                computing and big data applications. Because each node only possesses some nodes' dispersed data, the
                calculation/index can only be derived from the data it sees. All nodes must execute coordinated actions
                to
                solve the matching problem.

                Simultaneously, as an intermediary computer node, the auxiliary computing node is bidirectionally
                encrypted (double-blind) for the data of the matching parties. CPCB (commutatively encrypted calculation
                PCB, Commutative PCB) is the double-blind data PCB, and the consensus verification technique employs
                asymmetrical group key broadcasting encryption.</p>
            </div>
          </div>
        </div>
      </section>


      <!-- ABOUT -->
      <section class="about light-bg">
        <!-- Right Background -->
        <div class="main-page-section half_right_layout">
          <div class="main-half-layout half_left_layout"> </div>

          <!-- Left Content -->
          <div class="main-half-layout-container half_left_layout">
            <div class="about-us-con">
              <h3>ETD White Paper</h3>
              <p>The scientific community is intrinsically characterized by restrictions in regards to mutual consensus,
                widespread distribution, fair distribution of its product (i.e., knowledge), and so on. These are the
                very
                issues that blockchain solves efficiently with its transparency and immutability.


                We, at ETD, created unique new solutions to solve various technical problems associated with
                decentralized
                research and create long-term ecological processes that are consistent with economic reasoning. Let’s
                investigate the diverse practical value of blockchain and how it ties into scientific research through
                our
                white paper.</p>
              </br>
              <a href="./documents/517507901-ETD-WhitePaper-en-v5-2.pdf" class="btn">White Paper</a>
            </div>
          </div>
        </div>
      </section>

Class这一块写的有点冗余,但是最后的效果是对的,见下图
电脑上显示
手机上显示

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值