我在桌面上有以下部分,我需要在移动设备上使图像位于上方,橙色框处于向下,但是图像覆盖了所有内容。
台式机
.second-section .box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section .box-orange img {
height: 550px;
margin-top: -10%;
margin-left: 2%;
object-fit: cover;
}
.second-section .box-orange h3 {
font-size: 2.5em;
margin-bottom: 5%;
}
.second-section .box-orange h3 .line {
font-size: 2.5em;
margin-bottom: 5%;
}
.second-section .box-orange p {
font-size: 2.5em;
margin-bottom: 5%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section class="second-section">
<div class="container">
<div class="row align-items-center box-orange">
<div class="col-md-6">
<img class="w-100" src="img/campos.png">
</div>
<div class="col-md-6 ml-5 ml-md-0 text-center">
<h3>lorem lorem! <div class="line"></div>
</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.
</p>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
我不知道我是否应该以不同的方式构造CSS或某种媒体是否希望保持我需要的方式。
需要在移动设备中保持这种状态。
@media only screen and (max-width: 800px) {
.second-section img {
height: unset;
margin-left:unset;
}
.textdiv {
margin-left:0px;
}
}
答案 0 :(得分:0)
HTML代码:
http.get('api url').map(form => ({ ...form, data: nonEmptyProps(form.data) }));
CSS:
My.css:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<section class="second-section">
<div class="container">
<div class="row align-items-center box-orange">
<div class="col-md-6">
<img class="w-100" src="img.jpg">
</div>
<div class="col-md-6 ml-md-0 text-center textdiv">
<h3>lorem lorem! <div class="line"></div></h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.</p>
</div>
</div>
</div>
</section>
</body>
</html>
因为您给了图像固定的高度,并且该高度也适用于移动版本,所以要解决此问题,我已经添加了媒体查询
检查一下,它将起作用