Html 在 div 中对齐 2 个图像，一个到右，另一个到左

Align 2 images, one to right other to left inside div

提问by tumchaaditya

I have a in my webpage which carries 2 images. I want one image to be aligned left and other to the right end of the division.

我的网页中有一个带有 2 张图片的图片。我希望一个图像左对齐，另一个与分区的右端对齐。

The JsFiddle

该的jsfiddle

Here's my HTML:

这是我的 HTML：

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

and CSS:

和 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: I tried float:right;. Its works in in Chrome and FF but not in IE. And ofcourse this div has a parent div. But I don't think that will be a problem.

PS：我试过了float:right;。它适用于 Chrome 和 FF，但不适用于 IE。当然，这个 div 有一个父 div。但我认为这不会成为问题。

回答by Mr. Alien

You can wrap the images inside a position relative container and use position: absolute;to position them to bottom left and bottom right

您可以将图像包装在相对位置的容器中，并用于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;
}

Note: Am using nth-of-typeto select images so that I don't have to declare classes for each image, if you want to support older browsers, you need to add class for each image and replace :nth-of-typewith those classes

注意：正在使用nth-of-type选择图像，这样我就不必为每个图像声明类，如果您想支持旧浏览器，则需要为每个图像添加类并替换:nth-of-type为这些类

回答by Pawan Lakhara

try this

尝试这个

<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

CSS

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

Demo

演示