在较小的设备上,如何使3个盒子相互叠放?

时间:2018-07-08 14:30:42

标签: html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

嗨,我正在尝试创建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">&nbsp;</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>&nbsp;</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">&nbsp;</div>
            <img  src="https://www.acureorganics.com/media/wysiwyg/acure/banner-YEAH.jpg">
            <div class="content">&nbsp;</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">&nbsp;</div>
            <div class="content">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

0 个答案:

没有答案