Html 将两个图像与 <div> 的左下角和右下角对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2172454/
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 two images to bottom left & right corners of a <div>
提问by Mr. Boy
My page currently has something a bit like the following, in order to put two images on each side of my page header-bar.
我的页面目前有点类似于以下内容，以便在我的页面标题栏的每一侧放置两个图像。
<div id="header" >
<div style="float:left" >
<img src="media/logo1.png"/>
</div>
<div style="float:right" >
<img src="media/logo2.png"/>
</div>
</div>
While this works on the left-right alignment, I can't find a good tweak to get both images aligned to the bottom of the parent <div>. They seem to align to the top instead.
虽然这适用于左右对齐，但我找不到一个很好的调整来使两个图像与 parent 的底部对齐<div>。它们似乎与顶部对齐。
However I reckon this might be just the wrong approach to start with. Therefore all suggestions welcome on the best way to make it work - or better, how to arbitrarily force an image to a chosen corner of the parent <div>.
但是我认为这可能只是错误的开始方法。因此，欢迎所有关于使其工作的最佳方式的建议 - 或者更好的是，如何任意强制图像到 parent 的选定角落<div>。
回答by Doug Neiner
If your header has a fixed height, just use absolute positioning:
如果您的标题具有固定高度，只需使用绝对定位：
<div id="header" >
<img id="logo1" src="media/logo1.png"/>
<img id="logo2" src="media/logo2.png"/>
</div>
Then in your CSS:
然后在你的 CSS 中：
#header { position: relative; height: 200px}
#header img { position: absolute; bottom: 0; left: 0}
#logo2 { left: auto; right: 0}
Or, If your header is only as tall as logo1.pngthen use this CSS instead:
或者，如果您的标题只有那么高，请logo1.png改用此 CSS：
#header { position: relative;}
#logo2 { position: absolute; bottom: 0; right: 0}
This will cause logo1to set the height of headerand logo2will just sit at the bottom of headerand on the right.
这将导致logo1设置 的高度header并且logo2将仅位于底部header和右侧。
回答by craftsman
You can use margin-top property in the child divs:
您可以在子 div 中使用 margin-top 属性：
<div id="header" >
<div style="float:left; margin-top:20px" >
<img src="media/logo1.png"/>
</div>
<div style="float:right; margin-top:20px" >
<img src="media/logo2.png"/>
</div>
</div>
回答by pixeltocode
try this CSS
试试这个 CSS
#header {width: 980px; position: relative; height: 300px;}
#header .left {position: absolute; bottom: 0; left: 0;}
#header .right {position: absolute; bottom: 0; right: 0;}
and code
和代码
<div id="header">
<div class="left">
<img src="img1.jpg"/>
</div>
<div class="right">
<img src="img2.jpg"/>
</div>
</div>
