jquery - 同一行问题上的多层div

Question

我试图在另一个之上制作多个 div，因为我正在做一种不均匀的 1 行网格。 我的 HTML :

<div class="section-100pc">
<div class="section-spec">
    <div class="wrapper-spec">
        <div class="texte-spec">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    </div>
</div>
<div class="section-photo-spec"></div>

还有我的 CSS:

    .section-100pc {
    width:100%;
    background:gray;
}
.section-spec {
    width:50%;
}
.section-photo-spec {
    width:50%;
    background:red;
    z-index:999;
    position:absolute;
    right:0;
    min-height:300px;
}
.wrapper-spec {
    width:1200px;
    margin:0 auto;
    position:absolute;
    left:0;
    right:0;
}
.texte-spec {
    width:50%;
    background:green;
    text-align:left;
    padding: 30px 0;
    float:left;
}

所以我制作了 1 个包含 2 个 div 的 100% 部分。两者的宽度均为 50%。在左侧 50% 的 div 中，我插入了一个 1200px 的包装器，它具有绝对位置，因为我需要将一些文本与该 div 中网站的其余部分对齐。在这 1200 像素内，我创建了另一个 50% 的 div，其中包含文本。 在右侧(100% 部分中的另一个 50% div)，它保持在 50%，其中没有文本。稍后我会添加背景图片。

有点难以解释，但我相信你们看到我的 fiddle 或这里的代码就会明白。

我的问题 = 正确的 50% div 位于 100% 的主要部分下方。它与其余的不在同一行。我怎样才能做到这一点？一切都需要在同一行。

(我添加了一些 jQuery，因此由于“绝对”位置，父 div 与子 div 一起展开)

非常感谢，再次抱歉，这有点难以解释，英语不是我的母语!

干杯!

http://jsfiddle.net/ry9gt0Lt/2/

Answer 1

添加 float :左；到部分规范类:

类似于:

.section-spec {
    width:50%;
    float:left;
}

并确保红色方 block 的 z-index 大于绿色方 block 的 z-index 就可以了