将嵌套的div宽度拉伸到容器的宽度？

Question

嗨StackOverflow，

如何获得与所需输出相似的代码。 我基本上想要一个类似于卡片的div，它的嵌套div占据卡片div的整个宽度（不带填充），到目前为止，使用以下代码没有任何运气：

CSS：

.card {overflow:hidden;padding:5px;}
.innerStripe {position:absolute; left:0; right:0; background-color:red; color:white;} overflow:hidden;}

HTML：

<div class="card" style="col-md-12">
   <h1>Title Text</h1>
   <div class="innerStripe">Bar Text</div>
   <p>Paragraph text...</p>
</div>

请参阅JSFIDDLE： http : //jsfiddle.net/CkVLn/ （在条带后无法显示段落）

Answer 1

的jsfiddle

忘记位置，简单的方法是使用margin 。 在这种情况下，请始终给负边距。 从两侧给定负边距，与border-width相同

CSS将是：

.card { padding:0px;  border:5px solid #CCC; }
.card * { padding:0px 30px; }
.innerStripe { margin:0px -5px; background-color:red; color:white; padding:0px 35px; }

Answer 2

从您的div中删除absolute position 。

CSS

 .card {overflow:hidden; width:100px;border:1px solid black;position:relative;}
 .innerStripe {background-color:red; color:white; overflow:hidden;}

DEMO

Answer 3

通过一个简单的解决方案更新了您的提琴： http : //jsfiddle.net/9DcBX/

从外部div删除填充。

另外，从内部条纹中删除position：absolute和left和right属性

.innerstripe{
width:100%;
background-color:red; 
color:white;
}