Question

所以我尝试在之前和之后尝试CSS伪类。我试图使用那些伪来创建标题元素。这是为了减少使用div来保存左右图像。这是HTML的代码

    <header id="mastHead">
        <h1><a href="#">Branding</a></h1>
    </header>

所以我有3个图像来创建传统的标题元素，左侧和右侧的宽度为20px，高度为100px，中间的宽度为1px，高度为100px，将重复水平。在这里我的CSS

    #mastHead {
        background:url(images/headMiddle.jpg) repeat-x top left;
        width:1000px;
        height:100px;
        overflow:hidden;
    }

    #mastHead:before {
        content:"";
        display:block;
        background:url(images/headLeft.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:left;
    }

    #mastHead:after {
        content:"";
        display:block;
        background:url(images/headRight.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:right;
    }

    #mastHead h1 a {
        display:block;
        width:200px;
        height:41px;
        background:url(images/logo.png) no-repeat;
    }

所以问题是如果我删除h1元素，它将完美对齐但是如果我放置这些元素，它会将:: after伪类推下来，它将根据它的高度占用剩余空间。我怎么做这个h1元素只占用中间空间而不影响:: after space？

Answer 1

我用你的例子做了一个小提琴：http://jsfiddle.net/3Dcw3/（只设置宽度为500以适应小提琴并设置背景以显示它们）

以下是固定版本：http://jsfiddle.net/3Dcw3/1/

要点是：

将position:relative;添加到标题中。
使用绝对定位而不是浮动。
添加填充以使块位于它们之上。

前后使用CSS伪类

1 个答案: