css - 宽度不是从父级继承的？

Question

我正在尝试叠加图像。我以前做过一点，但由于某种原因，今天我显然忘记了一些事情。它似乎占用了整个页面的宽度，而不是其父级：

    #work_item {
        position: relative;
        width: auto;
    }

    #work_item img {}

    #work_item a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 30;
        height: 100%;
        width: 100%;
        background: #000;
        color: #FFF;
           }

            <div id='work_item'>
        <img src="" />
        <a href="#">Click Here!</a>
    </div>

有什么帮助吗？

score 1 · Accepted Answer

#work_item {
    display: inline-block;
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 1;
    height: auto;
    width: auto;
}

#work_item img {
    position: relative;
    z-index: 1;
    left: 0px;
    top: 0px;
}

#work_item a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 30;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
    color: #FFF;
}

<div id='work_item'> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" /> 
    <a href="#">Click Here!</a> 
</div>

演示：http: //jsfiddle.net/38v3h/

score 0 · Accepted Answer

div是一个块元素，它占据其父元素的整个宽度，而不管其内容的宽度。有很多方法可以让 div#work_item来包装内容。

显示内联块；

    #work_item {
        position: relative;
        width: auto;
        display inline-block;
    }

您还可以浮动 div：

  #work_item {
        position: relative;
        width: auto;
        float: left;
    }

score 0 · Accepted Answer

添加此代码，如果您的意思是#work_item：

#work_item {
    position: relative;
    width: auto;
    display: inline-block;
}

css - 宽度不是从父级继承的？

3 回答 3

小提琴：http: //jsfiddle.net/CRY3g/

css - 宽度不是从父级继承的？

3 回答 3

小提琴：http: //jsfiddle.net/CRY3g/

Related

Reference