使一个块填满其容器的整个宽度

Question

如果两者都是绝对定位的,并且内部的一个具有填充,我怎样才能使块填充其容器的整个宽度.

我做了一个JSFiddle:http: //jsfiddle.net/dmdBB/

这里有一个样本:

<style>
.containerOut {
    position: absolute;
    width: 400px;
    height: 400px;
    border: thin solid black;
}

.containerIn {
    position: absolute;
    outline: 1px solid red;
    width: auto;

    padding: 4px;
}
</style>
<div class="containerOut">
       <div class="containerIn">
          im not large enough
       </div>
</div>

在此示例中,.containerIn元素太薄.如果我将其宽度设置为100%,它会因为填充而溢出.

PS:我想要一个CSS解决方案,我知道放置一个100%宽度和0margin/padding/border的中间HTML容器可以解决问题.

Answer 1

而不是使用width: 100%,你需要使用left: 0; right: 0.

要修复最后一个示例,您可以使用word-wrap: break-word.

请参阅: http ://jsfiddle.net/QjdD5/1/

.containerIn {
    width: auto !important; /*just to override your inline CSS */
    left: 0;
    right: 0;
    word-wrap: break-word
}