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

Question

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

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

它看起来像：

应该是什么样的：

在这个例子中，div应该像行一样，但它不仅仅是：我希望div或span对于所有内容都是边界框。 （那么它们的部分内容也不可能推动另一部分内容的部分内容。）

示例 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上的浮动：

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

JSFiddle

Answer 2

你发短信''Config：'只是在div内部浮动，试着把文字放在一个容器里然后你不需要你的css中的任何float来得到你想要的东西

（所以你以后没有浮动清除，维护的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>

Answer 3

试试这个：

input{
    float:right;
}

div{
    overflow:auto;
}

小提琴：http://jsfiddle.net/0f5u0w6e/3/

Answer 4

只需在输入字段的父div中添加一个clear：right。像这样：

<div style="clear:right;">
    Config: 
    <input type="text"/>
</div>

避免使用内联样式并更好地使用类。

Answer 5

你可以用CSS技巧来做。

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

.clear{
    clear: both;
}
.aligment{
    width:100%;
}
.aligment span{
    float:left;
    width: 20%;

}
.aligment span.input{
    float:left;
    width: 70%;
    margin: 0 0 0 10px;
}

这是Fiddle