跨度內容超過兩個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