跨度内容超过两个div

Question

我有以下代码，我希望红色文本中的文本响应/环绕黄色框。这甚至可能（理想情况下没有JS）？

#div1 { 
 
    float: left; 
 
    width: 300px; 
 
} 
 
#div2 { 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#div3 { 
 
    float: left; 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 
p span { 
 
    width: 250px; 
 
    height: 50px; 
 
    left: 20px; 
 
    display: inline-block; 
 
    clear: both; 
 
    float: left; 
 
    background-color: yellow; 
 
    position: relative; 
 
}

<div id="div1"> 
 
    <div id="div2"> 
 
    <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, 
 
     <span>overlap me</span> \t in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p> 
 
    </div> 
 
    <div id="div3"> 
 
    <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi 
 
     sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p> 
 
    </div> 
 
</div>

Answer 1

这需要更多的结构和固定顶偏，但它可以做到：

#div1 { 
 
    float: left; 
 
    width: 300px; 
 
} 
 

 
#div2 { 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 

 
#div3 { 
 
    float: left; 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 
.post { 
 
    float: right; 
 
    width: .1px; 
 
    height: 100px; 
 
} 
 
.interruptor { 
 
    width: 260px; 
 
    height: 180px; 
 
    left: 20px; 
 
    clear: both; 
 
    float: left; 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
#div3 .interruptor { 
 
    width: 130px; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 
.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; height: 0; overflow: hidden; 
 
} 
 
    
 
.video-container iframe, 
 
.video-container object, 
 
.video-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="div1"> 
 
    <div id="div2"> 
 
     <div class="post"></div> 
 

 
     <div class="interruptor"> 
 
      <div class="video-container"> 
 
       <iframe width="560" height="315" src="https://www.youtube.com/embed/e2--l-YX1HU" frameborder="0" allowfullscreen></iframe> 
 
      </div> 
 
     </div> 
 

 
     <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi 
 
      sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p> 
 
    </div> 
 

 
    <div id="div3"> 
 
     <div class="post"></div> 
 

 
     <div class="interruptor"></div> 
 

 
     <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi 
 
      sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p> 
 
    </div> 
 
</div>

Fiddle demo