CSS 在一个div里放置了两幅图片，希望这两幅底部对齐，并且底部都位于div的底部边框那里应该怎么做？
RT，这两张图片的高度是不一样的。现在能通过padding使两幅图片底部对齐（如图一）。但是一点nextgroupofimage的话，新出现的两幅图片跟之前的两幅图片并没...
RT，
这两张图片的高度是不一样的。现在能通过padding使两幅图片底部对齐（如图一）。但是一点next group of image的话，新出现的两幅图片跟之前的两幅图片并没有对齐，这样就会出现图片跳来跳去的感觉..（如图一和图二的对比） 加了边框之后发现是因为两幅图片的底边位置没有一个固定的位置造成的。 想让它们底边位置在div里是相对固定的应该怎么办呢？
相关代码是这样的
css：
<style>
div.letter-pair {
width: 100%;
text-align: center;
border: 1px solid red;
}
img.letter {
display: inline-block;
border: 1px solid red;
background-color: #baabb6;
}
</style>
HTML:
<!--两个字母-->
<div class='letter-pair'
style="margin-left: 510px; margin-top: 57px; width: 311px; height: 174px; background-color: #ffffff">
<img id='left-letter' class='letter'>
<img id='right-letter' class='letter'>
</div> 展开
这两张图片的高度是不一样的。现在能通过padding使两幅图片底部对齐（如图一）。但是一点next group of image的话，新出现的两幅图片跟之前的两幅图片并没有对齐，这样就会出现图片跳来跳去的感觉..（如图一和图二的对比） 加了边框之后发现是因为两幅图片的底边位置没有一个固定的位置造成的。 想让它们底边位置在div里是相对固定的应该怎么办呢？
相关代码是这样的
css：
<style>
div.letter-pair {
width: 100%;
text-align: center;
border: 1px solid red;
}
img.letter {
display: inline-block;
border: 1px solid red;
background-color: #baabb6;
}
</style>
HTML:
<!--两个字母-->
<div class='letter-pair'
style="margin-left: 510px; margin-top: 57px; width: 311px; height: 174px; background-color: #ffffff">
<img id='left-letter' class='letter'>
<img id='right-letter' class='letter'>
</div> 展开
5个回答
展开全部
既然相对要相对的话div得设置相对
div.letter-pair {
position:relative;
}
要固定的话就要绝对定位
img.letter {
position:absolute;
bottom:0px;
}
绝对定位position:absolute;不设置相对哪个固定的话是相对body的，所以div定位要设置，由于两个图片都同一个绝对固定，所以是覆盖起来的，要分开要分别是在图片的left
综上就要上面的两个css和图片分别设置style="left:10px"和style="left:30px"，具体数字你自己看着办
div.letter-pair {
position:relative;
}
要固定的话就要绝对定位
img.letter {
position:absolute;
bottom:0px;
}
绝对定位position:absolute;不设置相对哪个固定的话是相对body的，所以div定位要设置，由于两个图片都同一个绝对固定，所以是覆盖起来的，要分开要分别是在图片的left
综上就要上面的两个css和图片分别设置style="left:10px"和style="left:30px"，具体数字你自己看着办
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给图片加上样式 "vertical-align:bottom";就是说底部对齐就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<style>
body{padding:0;margin:0;}
div.letter-pair{ position: relative; width: 300px; height: 200px; border:1px solid red; }
img.left{ float: none; position: absolute; width: 100px; height: 100px; border:1px solid red; bottom: 0; right: 55% }
img.right{float: none; position: absolute; width: 100px; height: 60px; border:1px solid red; bottom: 0; left: 55%; }
</style>
<body>
<div class="letter-pair">
<img class="left" />
<img class="right" />
</div>
</body>
</html>
两张图片居中 然后底部对齐，你可以根据你的具体需要更改下数据就行了
<html>
<style>
body{padding:0;margin:0;}
div.letter-pair{ position: relative; width: 300px; height: 200px; border:1px solid red; }
img.left{ float: none; position: absolute; width: 100px; height: 100px; border:1px solid red; bottom: 0; right: 55% }
img.right{float: none; position: absolute; width: 100px; height: 60px; border:1px solid red; bottom: 0; left: 55%; }
</style>
<body>
<div class="letter-pair">
<img class="left" />
<img class="right" />
</div>
</body>
</html>
两张图片居中 然后底部对齐，你可以根据你的具体需要更改下数据就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
padding不是填充的四吗？》
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
