所以我前后尝试用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 空间?
最佳答案
我把你的例子搞砸了:http://jsfiddle.net/3Dcw3/ (仅将宽度设置为 500 以适应 fiddle 并设置背景以可视化它们)
这是一个固定版本:http://jsfiddle.net/3Dcw3/1/
要点是:
- 将
position:relative;
添加到标题。 - 使用绝对定位而不是 float 定位。
- 添加填充,使 block 位于它们之上。
关于html - 前后使用CSS伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6785080/