2014-01-22 48 views
1

我試圖做到這一點(PNG樣機): enter image description here對齊在一個div的圖像坐在後面的文本在另一個DIV右

通過嘗試這種(jsfiddle):

HTML:

<div class="container"> 
    <div class="traintext">The East London Line part of the London Overground line that runs north to south through the East End, Docklands and South areas of London.</div> 
    <div class="trainimage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Unit_378150_at_Whitechapel.jpg/300px-Unit_378150_at_Whitechapel.jpg"></div> 
    </div> 
</div> 

CSS:

.container { 
    width: 500px; 
    height: 300px; 
    background-color: blue; 
} 

.traintext { 
    color: white; 
    font-size: 18px; 
} 

.trainimage { 

} 

但我不知道我需要做什麼才能獲得.trainimage.traintext在正確的位置。

+0

您的PNG模型未鏈接 – snollygolly

+0

對不起,如果它不清楚,它是文本下方的圖像我已經添加了。 – fakeguybrushthreepwood

+0

哎呀,我的代理必須阻止它:P – snollygolly

回答

1

一種選擇是絕對定位文本;從而將其從流中移出並將其放置在浮動的元件上。 EXAMPLE HERE

.traintext { 
    color: white; 
    font-size: 18px; 
    position:absolute; 
} 

.trainimage { 
    float:right; 
} 

你不應該有這種方法的任何問題;鑑於父母.container已定義尺寸(意思是它不會因爲浮動/絕對定位的元素而摺疊)

+1

謝謝JoshC,工作正常。 – fakeguybrushthreepwood

相關問題