javascript - 将父 div 宽度设置为与子 div 宽度相同的问题

Question

我有以下标记:

<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 background-image 属性，因为父 div 的宽度会不断变化，我不希望它切断静态背景图片。

我尝试使用 JavaScript 的 outerWidth 和 jQuery 的 .css("width") 和 .width() 方法，但似乎没有任何效果。

Answer 1

这些元素的宽度为 0px，因为您将 float:left 属性分配给了 div.head_title。由于这个 float 定义，div 不会拉伸(stretch)到全宽。

图像的宽度为100%，100%的零仍然是零。 h1 元素是绝对定位的，因此该元素也不会增加宽度。

要增加 div.head_title 的宽度，您必须指定一个宽度(例如 width:!00%)，或者移除 float 属性。