时间戳

首页 > 解决方案 > 如何使跨度通过 2 个容器 div

html - 如何使跨度通过 2 个容器 div

问题描述

如何使带有粘性元素的跨度通过 2 个引导程序的容器 div 浮动？

现在我不能让 span 元素粘在容器 div 的顶部，容器将始终保持在 span 元素的下方。另外，当缩小到移动视图时，我希望内容 1 保持在上方，然后是带有图像的 span 元素，最后是内容 2。每个容器都有一个背景图像，所以我希望 span 元素可以移动上下通过 2 个容器。非常感谢你。

这是我预期的结果：
在此处输入图像描述

这是 jsfiddle 链接：https ://jsfiddle.net/oafwmghd/2/

#sticky {
   position: -webkit-sticky;
   position: sticky;
   display: flex;
   display: -ms-flex;
   display: -webkit-flex;
   justify-content: center;
   margin-top: 30px;
   padding-bottom: 80px;
   top: 0;
   z-index: 1;
 }
<div class="container">
    <span><img
     src="https://previews.123rf.com/images/sooolnce/sooolnce1611/sooolnce161100038/66323541-realistic-plastic-bottle-for-water-on-a-transparent-background-vector-illustration.jpg"
            width=20% height=50% id="sticky"></span>
    <section>
        <div class="container" style="height:500px; background-color: green;">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-0">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    Content 1
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container" style="height:500px; background-color: red;">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-0">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    Content 2
                </div>
            </div>
        </div>
    </section>
</div>

标签： htmlcssbootstrap-4

解决方案

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <style>
 .row.one{
    align-items: stretch;
    justify-content: center;
    display: flex;
}
.col-lg-6 { width:50%;}
.col-lg-12 { width:100%;}
</style>
<section> 
<div class="container">
<div class="row one">
  <div class="col-lg-6 col-md-6 col-sm-12" style="background:#006;padding:50px 0;">
  Content 1
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12"  style="background:#993;padding:50px 0;">
     Content 2.1        
  </div>
   <div class="col-lg-12 col-md-12 col-sm-12"  style="background:#3FC;padding:50px 0;">
     Content 2.2        
  </div>
    </div>
  </div> 
</div>
    </div>
  </section>
 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <style>
 .row.one{
    align-items: stretch;
    justify-content: center;
    display: flex;
}
.col-lg-6 { width:50%;}
.col-lg-12 { width:100%;}
</style>
<section> 
<div class="container">
<div class="row one">
  <div class="col-lg-6 col-md-6 col-sm-12" style="background:#006;padding:50px 0; background:url(https://www.nationalgeographic.com/content/dam/travel/rights-exempt/2018-travel-photographer-of-the-year/magical-mountains/dawn-vestrahorn-iceland-mountains.jpg); background-size:cover;">
   
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12"  style="background:#006;padding:50px 0; background:url(https://www.dw.com/image/48396304_303.jpg); background-size:cover;">
          
  </div>
   <div class="col-lg-12 col-md-12 col-sm-12"  style="background:#006;padding:50px 0; background:url(https://amp.businessinsider.com/images/5ac3bdf57a74af1b008b4612-960-480.jpg); background-size:cover;">
          
  </div>
    </div>
  </div> 
</div>
    </div>
  </section>

跳，所以这会帮助你

推荐阅读