我的网页中有 2 张图片。我希望一张图像左对齐,另一张图像右端对齐。
The JsFiddle http://jsfiddle.net/NbekW/
这是我的 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。但我认为这不会成为问题。
您可以将图像包装在位置相关容器内并使用position: absolute;
将它们定位到左下角和右下角
Demo http://jsfiddle.net/MmM9r/
<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
选择图像,这样我就不必
为每个图像声明类,如果你想支持旧版浏览器,
您需要为每个图像添加类并替换:nth-of-type
和
那些课程
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)