Css 在div内对齐两个图像,一个向右,另一个向左

Css 在div内对齐两个图像,一个向右,另一个向左,css,html,Css,Html,我有一个在我的网页,其中载有2个图像。我希望一个图像向左对齐,另一个对齐到分区的右端 这是我的HTML: <div class="header"> <img id ="ttl" src="Home_files/images/ttl.png"> <img id ="se" src="Home_files/images/se.png"> </div> PS:我试过浮球:对;。它在Chrome和FF中工作,但在IE中不工作。 当然,这个div有一个父

我有一个在我的网页,其中载有2个图像。我希望一个图像向左对齐,另一个对齐到分区的右端

这是我的HTML:

<div class="header">
<img id ="ttl" src="Home_files/images/ttl.png">
<img id ="se" src="Home_files/images/se.png">
</div>
PS:我试过浮球:对;。它在Chrome和FF中工作,但在IE中不工作。 当然,这个div有一个父div。但我认为这不会是一个问题。

试试这个

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

您可以将图像包装在相对位置容器中,并使用position:absolute;将它们放置在左下角和右下角

注意:我正在使用第n个类型来选择图像,这样我就不必 如果要支持较旧的浏览器,请为每个图像声明类, 您需要为每个图像添加类,并将类型的:n替换为 那些班级


我在电子邮件的基本HTML标题div中使用了一个表。它工作得很好。在tr中,一个图像在左侧为td,另一个图像在右侧为float:right,在另一个td中。

您希望图像位于页面的左上角和右上角吗?不……分区的左下角和右下角,而不是整个页面的左下角。垂直表示从上到下。垂直对齐中没有右对齐。只是抬头一看;如果您有ie8或更高版本,浮动应该可以工作@卡尔上校:是的……我只是拼命想把它修好……嫉妒。。。这不可能是别的,因为这应该是一个不完美的答案question@tumchaaditya这是完美的,不知道怎么会失败,因为你通过一个小的修正就可以工作了…显然,IE无法识别CSS中类型1的第n个…所以我为图像设置了ID,现在它可以工作了…最有趣的是我的IE10甚至不能正确打开JSFIDLE!!:D@tumchaaditya哦,是的,您可以删除它们并使用类来代替:,这样它们将是跨浏览器的。您可以将此信息添加到您的答案中吗?这仍然是正确的,但浮动并不适用于所有浏览器,尤其是ie。他希望图像位于分区的左下角和右下角欢迎使用StackOverflow。谢谢你的贡献。在编写答案时,如果您在问题的上下文中编写答案,并显示一些代码,则更容易理解。这个问题是关于一个网站上的一个div,但是你在电子邮件中提到了一个表。此外,使用相对定位的公认答案是非表格数据的正确答案。
<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>
.left{
  float:left;
}
.right{
    float:right;
}
<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;
}