【发布时间】：2021-06-24 07:39:12
【问题描述】：
尝试调整我的网站！但是当屏幕是半屏时，左右元素都会合并。 我希望它们是一个在另一个之下，左元素在前，右元素在第二。
@media only screen and (max-width:400px) {
.about-right,
.about-left {
float:none;
width:100%;
padding-left: 25px;
padding-right: 25px;
}
半屏也是默认的移动视图。请帮忙。
全屏代码：
`@media only screen and (max-width:1024px) {
.about-profile {
padding-right: 5rem;
}
.about-services {
padding-left: 5rem;
}
@media only screen and (max-width:900px) {
.about-profile {
padding-right: 4rem;
}
.about-services {
padding-left: 4rem;
}
@fevid 第一次回答之后
HTML 代码：
<section id="about">
<div class="about-profile-bg"></div>
<div class="about-wrap">
<div class="about-profile">
<div class="about-profile-bg"></div>
<div class="about-services"> </div>
配置文件 = 右侧，服务 = 左侧。 我已经使用 CSS 来使用和设置左右两侧的样式。
.about-profile{
float: right;
width: 50%;
padding-left: 20px;
padding-right: 20px;
}
.about-services {
float:left;
width: 50%;
padding-left: 20px;
padding-right: 20px;
}
.about-services-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/profile-bg.jpg);
background-color: #615e5e;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 1;
.about-profile-bg {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#aaa7a3;
width: 50%;
background-image: url(../images/service-bg.jpeg);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: .80;
}
【问题讨论】：