我正在寻找将屏幕分成 3 个部分
在宽屏幕上:
在小屏幕上:
关于如何实现这一点有什么想法吗？ 我想有 flexbox 和网格系统的组合，但我无法弄清楚。
编辑:我只是试探性地使用行和列，但我不确定这是理想的解决方案
#left {
height: 600px;
}
#righttop {
height: 300px;
}
#rightbottom {
height: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success" id="left">
left part
</div>
<div class="col-md-6">
<div class="row bg-primary" id="righttop">first part right</div>
<div class="row bg-warning" id="rightbottom">first part left</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>最佳答案
三个图像组合，
html,
body {
height: 100%;
width: 100%;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-family: sans-serif;
}
.img_container {
width: 70vw;
height: 80vh;
margin: 20px auto;
display: flex;
}
.main-img {
width: 50%;
height: 100%;
margin-right: 10px;
background-color: orange;
}
@media (max-width: 991px) {
.main-img {
width: 100%;
height: 100%;
}
}
.stacked-div {
width: 50%;
height: 100%;
}
@media (max-width: 991px) {
.stacked-div {
width: 100%;
height: 100%;
}
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
opacity: 0;
transition: all .4s;
display: flex;
justify-content: center;
align-items: center;
}
.main-img:hover .overlay,
.top-img:hover .overlay,
.bottom-img:hover .overlay {
opacity: 1;
}
.top-img,
.bottom-img {
width: 100%;
height: calc(50% - 5px);
background-color: orangered;
}
.top-img {
margin-bottom: 10px;
}<div class="img_container">
<!-- top level image container START-->
<div class="main-img">
<!--Main image -->
<div class="overlay">
<!--overlay div -->
<h1>Hello!</h1>
</div>
</div>
<div class="stacked-div">
<!--stacked img container -->
<div class="top-img">
<!--top image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
<div class="bottom-img">
<!--bottom image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
</div>关于html - 屏幕在 bootstrap 4 上分成 3 部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56096237/