Css浮动混乱布局

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与解决方案的例子