Question

我试图找出css，一步一步。请考虑以下代码：

<header id="main">
    <a href="#" id="title"></a> 
</header>

和CSS：

#main{
    height: 220px;
    width: auto;
    border: 2px #000000 solid;
}

#title{
    float: left;
    background: url(http://i.imgur.com/m9fvwoJ.jpg) no-repeat;
    width: 300px;
    height: 175px;
}

如果我删除浮动属性，图片“消失”，我很难理解为什么。

Heres是JsFiddle中的代码=＆gt; http://jsfiddle.net/5nWag/3/

Answer 1

元素在floated时自动成为块级元素，因此您的宽度和高度规则正在应用并按预期工作。内联元素不能具有明确的宽度和高度，因为它们的内容决定了其线框的大小。内联元素也不能有任何垂直边距，边框或填充。背景消失的原因是因为您的<a>没有内容，因此没有维度，也因为您显然无法为<a>元素提供背景图片不修改其显示值。如果您在其周围包裹<span>并添加内容，则背景图像将可见：

http://jsfiddle.net/5nWag/8/

没有float属性的图片'消失'

1 个答案: