html - 将中间 div 宽度限制为子 div 宽度

Question

我有这样的嵌套div：

<div class="first">
    <div class="second">
        <div class="third"></div>
    </div>
</div>​

第三个 div 包含动态内容 - 所以我不知道它的尺寸。

我想要的是第二个 div 采用第三个 div 的宽度，而不是第一个更大的 div 的宽度。

所以在这个演示中，我希望边框包围绿色方块。这可能只用css吗？如果是这样，如何？谢谢。

Answer 1

把一个float: left;放在二等舱。这应该够了吧。

Answer 2

.second {浮动：左；}

或者

.second { 显示：内联块；//不适用于ie7 }

Answer 3

实际上div是一个块级元素，所以你可以给display:inline-block第二个div，而不是它会占用第三个 div 宽度和高度，反之亦然......

CSS

.first
{
    width: 500px;
    height: 500px;
    background: yellow;
}

.second
{
    border: 5px solid blue;
    display:inline-block;
}

.third
{
    min-width: 100px;
    min-height: 100px;
    background: green;
}

演示