设置没有填充/边距的div宽度

Question

我想设置我的标题栏，如下图所示：

其实我有：

标题栏宽度需要等于图片的宽度，没有绿色的边距/填充。 我如何设置我的块？

HTML：

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="title">Title</div>
    <img src="http://lorempixel.com/300/300/city/" alt="..." class="img-thumbnail">
</div>  

CSS：

.title {
    width: 100%;
    height: 30px;
    box-sizing: border-box; 
}

http://jsfiddle.net/L7cLtz49/

Answer 1

结账这一个 http://codepen.io/vilaskumkar/pen/zxadGB

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="imgHolder">
                        <div class="test"></div>
                        <img src="http://lorempixel.com/300/300/city/" alt="..." class="img-thumbnail">
                    </div>
                </div>  

我想这可能对您有帮助，我已经更新了您的标记

Answer 2

你应该把你的容器放在相对位置，你的标题是绝对的背景alpha，如：

＆＃13;

＆＃13;

.post {
    position: relative;
    display: inline-block;
}
.title {
    width: 100%;
    height: 30px;
    background: rgba(255,255,255, 0.5);
    box-sizing: border-box; 
    position: absolute;
    top: 50px;
    left: 0;
    line-height: 30px;
    text-align: center;
}

＆＃13;

<div class="post">
    <div class="title">Title</div>
    <img src="http://lorempixel.com/300/300/city/" alt="..." class="img-thumbnail">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以试试这个

.title {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    position: relative;
    text-align: center;
    top: 90px;
    width: 100%;
}

和html是

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="title">Title</div>
    <img src="http://lorempixel.com/300/300/city/" alt="..." class="img-thumbnail">
</div>