Question

我的页面目前有类似下面的内容，以便在页面标题栏的每一侧放置两个图像。

    <div id="header" >
        <div style="float:left" >
            <img src="media/logo1.png"/>
        </div>
        <div style="float:right" >
            <img src="media/logo2.png"/>
        </div>
    </div>

虽然这适用于左右对齐，但我找不到一个好的调整，以使两个图像都与父<div>的底部对齐。它们似乎与顶部对齐。

但是我认为这可能只是错误的开始。因此，所有建议都欢迎以最佳方式使其发挥作用 - 或者更好，如何任意强制图像到父<div>的选定角落。

Answer 1

如果您的标题有一个固定的高度，只需使用绝对定位：

<div id="header" >
    <img id="logo1" src="media/logo1.png"/>
    <img id="logo2" src="media/logo2.png"/>
</div>

然后在你的CSS中：

#header     { position: relative; height: 200px}
#header img { position: absolute; bottom: 0; left: 0}
#logo2      { left: auto; right: 0}

或，如果您的标题仅与logo1.png一样高，请改用此CSS：

#header     { position: relative;}
#logo2      { position: absolute; bottom: 0; right: 0}

这会导致logo1设置header的高度，logo2只会位于header的底部和右侧。

Answer 2

您可以在子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>

Answer 3

试试这个CSS

#header {width: 980px; position: relative; height: 300px;}
#header .left {position: absolute; bottom: 0; left: 0;}
#header .right {position: absolute; bottom: 0; right: 0;}

和代码

<div id="header">
  <div class="left">
      <img src="img1.jpg"/>
  </div>
  <div class="right">
      <img src="img2.jpg"/>
  </div>
</div>

将两个图像对齐到左下角＆amp; <div> </div>的右角

3 个答案: