如何创建3个不同尺寸的盒子?

Question

我正在尝试创建 3 个盒子，一个大盒子，旁边有两个小盒子。在每个盒子里我都有图像，问题是这两个小盒子在任何设备上都没有响应，它在桌面上工作得很好。我真的很迷茫，找不到我做错的地方，我从昨天开始就一直在努力。

.fashion_look img {
width: 100%;
display: inline;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.main-container .block-container .fashion_look .content {
position: absolute;
top: 5%;
left: 0%;
width: 100%;
text-align: center;
padding: 0 35px;
}
.main-container .block-container {
display: inline-block;
width: 100%;
float: left;
}
.main-container .widget-static-block {
display: block;
overflow: hidden;
padding-top: 60px;
}
.main-container .block-container .banner_top,
.main-container .block-container .new_shoes,
.main-container .block-container .fashion_look {
position: relative;
overflow: hidden;
}
.main-container .block-container .overlay {
bottom: 0;
height: auto;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-webkit-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
width: auto;
z-index: 2;
}
.main-container .block-container .new_shoes .content {
position: absolute;
top: 10%;
left: 0%;
width: 60%;
text-align: center;
padding: 0 35px;
}

<div class="widget widget-static-block">
<div class="block-container">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="fashion_look">
<div class="overlay">&nbsp;</div>
<a href="https://www.acureorganics.com/skin.html"><img src="#></a><br>
<div class="content">
<h3>&nbsp;</h3>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="new_shoes">
<div class="overlay">&nbsp;</div>
<img src="#">
<div class="content">&nbsp;</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="overlay">&nbsp;</div>
<div class="banner_top">
<a href="https://www.acureorganics.com/body.html"><img src="#"></a>
</div>
<div class="banner_top">
<div class="content">&nbsp;</div>
<div class="content">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

问题是两个小框中的图像无法正确缩放，并且在屏幕较小时不适合同一行。

如果我添加此 CSS，它可以工作：

img {
width: 100%;
height: auto;
}

看看这个小提琴。

Answer 2

仅使用 Bootstrap 4 的实用程序

我不确定您希望侧面部分在移动设备上显示在哪里，所以这里它显示在主要部分下方。请注意，添加 bg 颜色只是为了清楚地说明每个部分的外观。

body, html{
height:100%;
}


.container-fluid,
.container-fluid .row{
height:100%;}

<link href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-8 bg-primary text-white">
<h2>Main Column</h2>
</div>
<div class="col-12 col-md-4">
<div class="row px-md-3">
<div class="col-12 mb-md-3 bg-dark text-white">
Top Secret
</div>
<div class="col-12 bg-warning">
Bottom Secret
</div>
</div>
</div>
</div>
</div>

如果您想看到另一个使用更多自定义CSS(或网格设置(的实现，请告诉我。