Question

我正在尝试创建一个css模板，其中3个文本paragrahs互相交互，如下图：

enter image description here

将重复数百页。所有P1 Middle＆amp; P2有不同的长度。

基本上

1）中间开始几行并且是合理的 2）每个部分将填充页面，但如果有内容，则将元素的1/3给予元素。例如，在pic中，p2比中间长，p2占据页面的一半。而且它比p1长，p2占据了整个页面。

我做了一个小提琴：http://jsfiddle.net/fVvxb/1/ 用非工作图像代替中间。它很好地包裹在侧面，但不在顶部边缘。

我有点不知道如何将P2加入派对

任何浏览器，任何js框架都可以使用

Answer 1

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

http://segment7.net/projects/web/z-index.html

Answer 2

对于这个浮动将是一个令人头痛的问题。您应该使用定位，额外的<p>和z索引来实现此功能：

HTML

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

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

    </div>

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

</div>

CSS：

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

http://jsfiddle.net/AAvF4/

Answer 3

你想找http://jsfiddle.net/fVvxb/2/

之类的东西吗？

Answer 4

浮动P1和P2并将“中间”置于绝对位置

Answer 5

通过一些额外的标记，我认为你可以实现你的目标：

你知道（或通过javascript可以计算）MIDDLE的高度和
如果可能的话，请在第二个来源订购 div中保留最长的文字（可能会根据您的选择向左或向右移动。如果＃2不可能，我肯定可能有一种方法可以修改这里的原则以使其仍然有效，但如果较长的文本总是在源文件中排在第二位，那将是最简单的。

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

小提琴是：左长http://jsfiddle.net/fVvxb/58/左右http://jsfiddle.net/fVvxb/59/。

一些进一步的建议是通过容器类来控制它。缩小代码：

HTML：

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

CSS

.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 */}

Float 3相互缠绕

5 个答案: