Html 在 div 中对齐 2 个图像,一个到右,另一个到左
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16603884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
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
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;
将它们定位到左下角和右下角
<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-type
to 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-type
with those classes
注意:正在使用
nth-of-type
选择图像,这样我就不必为每个图像声明类,如果您想支持旧浏览器,则需要为每个图像添加类并替换:nth-of-type
为这些类