對齊2張圖片，其中一張右對齊左邊div

我在我的網頁上載有2張圖片。我想要一個圖像左對齊，其他對齊到右邊。對齊2張圖片，其中一張右對齊左邊div

這裏是我的HTML：

<div class="header"> 
<img id ="ttl" src="Home_files/images/ttl.png"> 
<img id ="se" src="Home_files/images/se.png"> 
</div>

和CSS：

.header { 
position: relative; 
top: 0%; 
height: 20%; 
} 
/*Header CSS*/ 
img#ttl { 
position: relative; 
top:50%; 
height: 50%; 
left: 0px; 
} 
img#se { 
position: relative; 
top:60%; 
height:30%; 
vertical-align:right; 
margin-right: 2%; 
}

PS：我試過float:right;。它的作品在Chrome和FF中，但不在IE中。而當然這個div有一個父div。但我認爲這不會成爲問題。

來源

2013-05-17 tumchaaditya

您想要頁面左上角和右上角的圖像？ –

否......劃分的左下角和右下角，而不是整個頁面的劃分。 – tumchaaditya

垂直意味着從上到下。「垂直對齊」中沒有「右」。只是一個擡頭;） – CaptainCarl

你可以換一個位置相對容器內的圖像，並使用position: absolute;將它們定位到左下角和右下角

Demo

<div class="wrap"> 
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
</div> 

div.wrap { 
    width: 600px; 
    border: 1px solid #f00; 
    height: 300px; 
    position: relative; 
} 

.wrap img { 
    border: 1px solid blue; 
    position: absolute; 
    bottom: 0; 
} 

.wrap img:nth-of-type(1) { 
    left: 0; 
} 

.wrap img:nth-of-type(2) { 
    right: 0; 
}

注意：在使用nth-of-type選擇圖像，這樣我不必聲明類每幅圖像，如果你想支持舊的瀏覽器做AM，你需要添加類爲每個圖像並用替換:nth-of-type這些類別

來源

2013-05-17 07:51:31

對-1有何評論？ –

嫉妒......它不可能是別的，因爲這應該是完美的答案，對於 – Seer

+1這個問題，我的工作很好，還有一個不錯的瀏覽器友好的解決方案。 –

試試這個

<div class="header"> 
    <div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div> 
    <div class="right"><img id ="se" src="Home_files/images/se.png"><div> 
</div>

CSS

.left{ 
    float:left; 
} 
.right{ 
    float:right; 
}

Demo

來源

2013-05-17 07:45:19

這仍然是真實的，但浮動不適用於所有瀏覽器，即特別是。 –

他想要分區的左下角和右下角的圖像 –

@Pawan：Alien先生的答案適用於我......但感謝您的努力。 – tumchaaditya

對齊2張圖片，其中一張右對齊左邊div

回答

相關問題