Question

我的网页上有2张图片。我希望一个图像左对齐，另一个图像右边对齐。

这是我的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。但我认为这不会是一个问题。

Answer 1

您可以将图像包装在位置相对容器内，并使用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选择图片，以便我不必这样做如果要支持旧版浏览器，请为每个图像声明类，您需要为每个图像添加类并将:nth-of-type替换为那些课程

Answer 2

试试这个

<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

Answer 3

我在基本HTML标头table中使用了div来发送电子邮件。工作正常。在tr中，一个图像的左侧为td，另一幅图像的右侧为float: right，另一个图像td。

对齐2个图像，一个到另一个，左边是div

3 个答案: