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

回答

相关问题