Css漂浮佈局

我想要這個佈局，我有一個矩形框。在左邊的框內有一個文本，右邊有一個圖像。如果我在沒有桌子的情況下執行此操作，則浮動會使框內的元素顯示在外面。我如何做這項工作？Css漂浮佈局

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

來源

2013-03-12 Foo

一下添加到父容器：

.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

來源

2013-03-12 14:59:00

完美！有效！我會在12分鐘後讓我接受這個答案。 – Foo 2013-03-12 15:00:43

不用擔心，很樂意爲您提供幫助。感謝@William Tate爲添加小提琴。 – 2013-03-12 15:01:32

比利護城河答案是做正確的方式。另外還有另外一種方法。您可以在清除浮點數的情況下將一個空元素添加到父元素的末尾。即

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

來源

2013-03-12 15:21:07 Rakesh

回答

相關問題