Question

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

＆＃13;

#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;
}

＆＃13;

<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>	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>

＆＃13;

Answer 1

它将采用更多结构和固定的顶部偏移，但可以完成：

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

<强> Fiddle demo

跨越两个div的内容

1 个答案: