1

如果之前已经回答过这个问题，请原谅，但我在搜索时找不到答案。

基本上我想要做的是创建一个 107px 高的标题栏，跨越页面的 100% 宽度，颜色分割为 50%（左侧 50% 为白色，右侧 50% 为绿色）沿它的宽度。我已经能够使用 CSS 渐变来实现这一点，但是我在教育部门工作，学校似乎不愿意使用任何东西，除了旧版本的 IE，因此，不可避免地，它不能正常工作。

无论如何要做到这一点，这是 IE 友好的，还是有任何解决方法可以给我相同或相似的结果？

提前致谢！

4

2 回答 2

4

你有几个选择：

  1. 使用背景图片（5px 高，非常宽，左半边是白色的，右半边是绿色的）——它会花费你不到 100 字节。

  2. 为什么不使用两个 div（向左浮动，宽度均为 50%）？

这是HTML：

<div class="header">
    <div style="background: white;">
        white bg
    </div>
    <div style="background: green;">
        green bg
    </div> 
</div>

这是CSS：

.header { overflow: hidden; height: 107px; border: 1px solid #000;}
.header div { float: left; width: 50%; height: 100%;}

http://jsfiddle.net/PUWCh/

于 2013-09-04T15:38:43.753 回答
0

像这样？http://jsfiddle.net/2gGdD/

我正在使用伪选择器（回溯到 IE8）来创建每一半，并将它们分层放在 div 后面，z-index 为负值，这样你就可以在它们上面放置内容。

.header {
    height: 107px;
    position: relative;
    width: 100%;
}

.header:before,
.header:after {
    content: '';
    height: 100%;
    position: absolute;
    width: 50%;
    z-index: -1;
}

.header:before {
    background: red;
    left: 0;
}
.header:after {
    background: blue;
    right: 0;
}
于 2013-09-08T04:21:06.813 回答