0

我需要一些帮助来覆盖<div>超过 3 个在它们自己的容器<div>中设置样式的其他元素。float:left

现在看起来像这样（http://i.imgur.com/2xk4tax.jpg），我希望文本覆盖在三个浮动颜色线的顶部。

这是我的 hmtl/css 任何帮助将不胜感激。

HTML

<body>  

<div id="introtextcontainer">
    <p>hi</p>
</div>
<div id="linecontainer">
    <div id="line1">
    </div>
    <div id="line2">
    </div>
    <div id="line3">
    </div>
</div>

</body>

CSS

#introtextcontainer {
    margin: 0px auto 0px auto;
    width: 500px;
    height: 100px ;
    text-align:center;
    font-color: black;
    float:middle;
}

#linecontainer {
    margin: 0px auto 0px auto;
    width: 500px;
    height: 3000px ;
}

#line1 {
    width:160px;
    height:2000px;
    background-color: #00A7B0;
    float:left;
}

#line2 {
    width:160px;
    height:2000px;
    background-color: #D1DE3E;
    float:left;
}

#line3{
    width:160px;
    height:2000px;
    background-color: #DE006B;
    float:left;
}
4

2 回答 2

0

只需将position:absoluteand添加width:100%到您的introtextcontainer容器中，它似乎就可以工作：

#introtextcontainer {
    margin: 0px auto 0px auto;
    height: 100px;
    text-align:center;
    font-color: black;
    position:absolute;
    width:100%;
}

jsFiddle 示例

请注意，没有这样的float:middle;属性（仅左或右）。

于 2013-03-15T19:45:12.247 回答
0

您还可以定位：绝对 #linecontainer 以在文本后面向上滑动（我也将它与 left:50%; margin-left:- 0.5 * width 居中）。您可能必须给文本一个位置：相对；z-索引：1；强制它在上面。

#introtextcontainer {
    margin: 0px auto 0px auto;
    height: 100px;
    text-align:center;
    font-color: black;
    position:relative;
    width:100%;
    z-index:1;
}
#linecontainer {
    margin: 0 0 0 -250px;
    width: 500px;
    height: 3000px;
    position:absolute;
    top:0;
    left:50%;
}

或者更好的是，使用渐变生成器，删除 3 个 div 并将条形设置为背景： http: //www.colorzilla.com/gradient-editor/

#introtextcontainer {
    margin: 0px auto 0px auto;
    height: 100px;
    text-align:center;
    font-color: black;
    position:absolute;
    width:100%;
    background: rgb(0,167,176); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwMGE3YjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiNkMWRlM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzNCUiIHN0b3AtY29sb3I9IiNkMWRlM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NiUiIHN0b3AtY29sb3I9IiNkMWRlM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NiUiIHN0b3AtY29sb3I9IiNkZTAwNmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgba(0,167,176,1) 33%, rgba(209,222,62,1) 33%, rgba(209,222,62,1) 34%, rgba(209,222,62,1) 66%, rgba(222,0,107,1) 66%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(33%,rgba(0,167,176,1)), color-stop(33%,rgba(209,222,62,1)), color-stop(34%,rgba(209,222,62,1)), color-stop(66%,rgba(209,222,62,1)), color-stop(66%,rgba(222,0,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* IE10+ */
    background: linear-gradient(to right,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a7b0', endColorstr='#de006b',GradientType=1 ); /* IE6-8 */

}
于 2013-03-15T19:59:27.550 回答