Css 将3个div相互浮动

我正在尝试创建一个css模板，其中3个文本段落相互作用，如图所示：

它将在数百页上重复。所有P1和P2具有不同的长度

基本上

1） 中间开始向下几行，并且是对的 2） 每个部分都会填满页面，但如果元素有内容，则会将页面的1/3分配给元素。例如，在图片中，p2比中间长，p2占据了页面的一半。当它比p1长时，p2占据了整个页面

我拉了一把小提琴： 中间有一个非工作图像。它很好地包裹着底部和侧面，但不超过顶部边缘

我有点不知所措，不知道如何在聚会上添加P2

---

任何浏览器、任何js框架都可以工作

将P2置于后台，将P1置于P2之上，然后将P3置于P2之上。所以你只需要操纵div的zindex

---

您是否正在寻找类似于浮点P1和P2的东西，并将“中间”绝对值置于其上方

使用浮点将是一件令人头痛的事情。您应该使用定位、额外的

和z索引来实现这一点：

HTML

---

通过一些额外的标记，我认为您可以实现您的目标，前提是：

您知道（或者通过javascript可以计算）中间的高度

如果可能的话，将最长的文本按顺序放在第二个源代码中

div

（可能会根据您的选择向左或向右结束。如果#2不可能，我相信有办法修改这里的原则以使其仍然有效，但如果较长的文本可以始终放在源代码中的第二位，这将是最简单的

注：目前我只能访问IE8浏览器进行测试

小提琴是：左长和右长

一些进一步的建议是按容器类进行控制。缩小代码：

HTML:

---

当我使用absolute时，div相互重叠。如果这是路线-我如何将相对div环绕在absolute周围？对不起，我看不出任何区别？这包括如何使用css将div与给定的位置进行排列。你能更具体一点吗？没有浮点数，只有z索引？定位如何？我不明白你的答案..zindex指定您的div从前到后显示在哪个位置。然后您需要绝对布局来定位div。我将为您找到一个示例…文本在那里重叠并隐藏内容。我不认为这对包装问题有什么帮助？您可以在div中平铺内容来克服这一问题。如果平铺，相对会不会更容易？刚刚看到这个now-没有出现在我的收件箱中！看起来不错，但在我看来，侧div没有环绕中间div。绝对div位于顶部，模糊了侧div的文本？是的，没有办法让一个div在另外两个div中包裹内容。您可以在另外两个div中使用放置在中间div下的元素来伪造包裹：）是的，太棒了。通过查看您的代码，我得到了所有的工作x中柱高度-直到我记得你的第1点！现在我要做的就是刷上我的JS！非常感谢，帮了大忙。

<div id="wrap">
    <div id="p2">
      <p>  Lorem Ipsum...</p>
    </div>

    <div id="p1">
        Lorem Ipsum ...

    </div>

        <div id="middle">
            Lorem Ipsum...
        </div>

</div>

#wrap
{
    border: 1px solid #000;
    width: 100%;
    position: absolute;
    height: 100%;
}

#p1
{
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    height: 95%;
    background-color: #f00;
    z-index: 2;
}

#p2
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0f0;
    z-index: 1;
}

#p2 p
{
    margin-left: 53%;
}

#middle
{
    position: absolute;
    top: 25%;
    left: 40%;
    background-color: #ddd;
    width: 200px;
    height: 200px;
    z-index: 3;
    overflow: hidden;
}

<div class="wrapContainer right"> <!-- change class to left for left short column -->
<div id="p1"> <!-- floats the direction of wrapper's right or left class name -->
    <div class="positioner"></div>
    <img src="img.jpg" class="centerImg">
    <div class="padder">
       ...preferably short text always goes in first group... 
       ...if not, modifications to how this works will need to be made... 
    </div>
</div>
<div id="p2">
    <div class="positioner"></div>
    <div class="dummyImg"></div>
    <div class="padder">
       ...long text should always go here for this solution...          
    </div>
</div>
</div>

.left #p1 {
    float: left; 
    border: 1px solid blue; /* just for show */
    width: 50%; /* width is needed on this, but that limits it to not wrap below middle image, so this is why it should be applied to the shortest text only */
    margin-right: 10px; /* separating the two columns */
}
.left #p1 .centerImg {
    float: right; /* floated oppostie the p1 */
    clear: right; /* this clears the positioner div */
    margin: 0 -100px 0 10px; /* the negative margin is half picture width */
    width: 200px; 
    height: 99px;
 }

/* all the right version css is just a reversal of the left already explained */
.right #p1 {float: right; border: 1px solid blue; width: 50%; margin-left: 10px}
.right #p1 .centerImg {float: left; clear: left; margin: 0 10px 0 -100px; width: 200px; height: 99px;}

#p2 {border:1px solid red;}
.left #p2 .dummyImg { /* this is used to affect the p2 where the img is in p1 */
    float: left; 
    clear: right; /* both positioner divs are floated the opposite direction as the p1 */
    width: 100px; /* half the middle image width */
    height: 99px; /* this is why height of the middle (img) must be known */
    margin: 0 10px 0 -10px; /* this is just offseting and creating margins */
 }

.right #p2 .dummyImg {float: right; clear: left; width: 100px; height: 99px; margin: 0 -10px 0 10px;}

.left .positioner {
    float: right; /* floated oppostie the p1 */
    width: 0; /* this keeps it from interfering with the columns, letting the text flow above the middle image */
    height: 75px; /* this is the offset from the top for the middle image */
}
.right .positioner {float: left; width: 0; height: 75px;}
.padder {padding: 10px; /* give the text some breathing room */}