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 with example of solution

Answer 2

Billy Moat的答案是正确的方法。另外，还有另一种方法。您可以将空元素添加到父元素的末尾，并清除其浮点数。即

.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>

Css浮动混乱布局

2 个答案: