跨瀏覽器頁面頂部的三個同等徽標的解決方案

Question

我在我的網站有3個徽標。要求是：

• 第一個應該在左上方。
• 第二個應該在右上角。
• 三分之一應該在距離它們相等的兩個徽標的中間。

我不是CSS專家，我盡力而爲，但無濟於事。我設法使這兩個第一個徽標左右浮動，但是第三個，我使用margin和absolute position，這不是一個好的解決方案，因爲我認爲：在調整瀏覽器大小或更改設備或瀏覽器時，它有一個不好的位置。

我使用的代碼：

<img src="images/logo2.png" width="150" height="215" style="float:right"> 
<img src="images/logo3.png" height="70" style="margin:10px 620px 10px 0; position: absolute"> 
<img src="images/logo1.png" width="133" height="235" style=" float:left;"> 

請幫我找到這個問題的解決方案，這將得到高度讚賞。

再次感謝。

Answer 1

嘗試這種情況：

<div style="text-align: center;"> 
    <img src="images/logo2.png" width="150" height="215" style="float:right"> 
    <img src="images/logo3.png" height="70" > 
    <img src="images/logo1.png" width="133" height="235" style=" float:left;"> 
</div> 

Example Fiddle

這應該只要圖像寬度的總和小於主體的寬度小工作。

否則，您應該使用圖像寬度的百分比值，如完成here。