css - Css float 搞乱了布局

Question

我想要这个布局，我有一个矩形框。左边的方框内有一个文本，右边有一个图像。如果我在没有表格的情况下执行此操作，则浮动会导致框内的元素出现在外面。我如何使这项工作？

<div style="width: 100%;border-style:solid;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

Answer 1

将此添加到父容器：

.parent {
    overflow: hidden;
}

<div class="parent" style="width: 100%;border-style:solid;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

带有解决方案示例的jsfiddle

Answer 2

比利护城河的答案是正确的方法。要添加还有另一种方法。您可以在父元素的末尾添加一个空元素，并清除其浮动。IE

.dummyClear{
   clear:both
}

<div style="width: 100%;border-style:solid;">    
    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>
    <div class="dummyClear"></div> <!-- Any tag is fine -->

</div>