如何使div或span元素真正嵌套

Question

我一再遇到这个问题,但还没有找到解决方案.

示例1:http://jsfiddle.net/0f5u0w6e/1/

它看起来像什么:

应该是什么样的:

在这个例子中,div应该像行一样,但它不止于此:我希望div或spans是所有内容的边界框.(那么它们的部分内容也不可能推动另一部分内容的部分内容.)

示例2:http://jsfiddle.net/gd7Losru/1/

我希望内部(红色)跨度使外部(蓝色)div具有一个高度,使其包含它.(再次:边界框).

如果jsFiddle脱机,代码的副本:示例1:

<div style="width: 200px;">
    <div>
        Title Title Title 
        <span class="button" 
            style="float: right; padding: 10px;">
            button</span>
    </div>
    <div>
        Config: 
        <input type="text" />
    </div>
</div>

例2:

<div style="background-color: blue;">
    <span style="padding: 10px; background-color:red; "></span>
</div>

Answer 1

您的文本即“配置：”只是在您div尝试将文本放入容器中浮动，然后您不需要float在CSS中添加任何内容来获得您想要的内容

（这样你以后就没有需要清除的浮动，并且需要维护的 CSS 也更少）

<div style="width: 200px;">
    <div>
        <label>Title Title Title </label>
        <span class="button" style="padding:10px;">button</span>
    </div>
    <div>
        <label>Config: </label>
        <input type="text" />
    </div>