我有以下标记:
<div class="head_title">
<img src="/path/to/image.png">
<h1 id="entryTitle">
<!--Cufon Font-->
</h1>
</div>
我希望 img 元素拉伸(stretch)到“head_title”div 的整个宽度。当我尝试将“head_title”div 设置为与“entryTitle”子 h1 标签一样宽时,麻烦就来了。这是我正在使用的 CSS:
.head_title {
display:block;
float:left;
position:relative;
height:40px;
}
.head_title img {
height:100%;
width:100%;
display:block;
}
.head_title h1 {
color:#fff;
position:absolute;
top:0;left:0;
z-index:1;
padding:0 0 0 5px;
}
底层的img元素包含父div的背景 - 我不想使用CSS背景图像属性,因为父div的宽度会不断变化,我不希望它切断静态背景图片。
我尝试使用 JavaScript 的 outerWidth
和 jQuery 的 .css("width")
和 .width()
方法,但似乎没有任何效果。
最佳答案
这些元素的宽度为 0px,因为您将 float:left
属性分配给 div.head_title
。由于此 float 定义,div 不会拉伸(stretch)到完整宽度。
图像的宽度为100%,100%的零仍然是零。 h1 元素是绝对定位的,因此该元素也不会增加宽度。
要增加 div.head_title
的宽度,您必须指定宽度(例如 width:!00%
),或删除 float 属性。
关于javascript - 将父 div 宽度设置为与子 div 宽度相同时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7434187/