嗨,我正在尝试创建3个盒子,旁边一个大两个小盒子,并在盒子内部添加图像。问题是在小型设备中,我希望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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="widget widget-static-block">
<div class="block-container">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="fashion_look">
<div class="overlay"> </div>
<a href="https://www.acureorganics.com/skin.html"><img src="https://www.acureorganics.com/media/wysiwyg/acure/570_1a.jpg"></a><br>
<div class="content">
<h3> </h3>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="new_shoes">
<div class="overlay"> </div>
<img src="https://www.acureorganics.com/media/wysiwyg/acure/banner-YEAH.jpg">
<div class="content"> </div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="banner_top">
<a href="https://www.acureorganics.com/body.html"><img src="https://www.acureorganics.com/media/wysiwyg/acure/banner-BODY.jpg"></a>
</div>
<div class="banner_top">
<div class="content"> </div>
<div class="content"> </div>
</div>
</div>
</div>
</div>
</div>
</div>