Question

我想在不知道兄弟div的高度的情况下将div对齐到兄弟div的底部。这是我正在使用的布局：http://abbymilberg.com/sample-layout.html。

我想让右手div与左手div的底部对齐而不在顶部边缘进行硬编码，因为在我的最终项目中，左手div中的内容将是动态的，并且高度将不断变化。

我不知道用CSS做这件事的方法。我猜可能有一些方法可以使用javascript获得元素的高度，但我可以使用任何有效的东西。

<head>

    <style type="text/css">

        #body{text-align:center; margin:0px;}

        #wrapper{border:solid 1px; margin:10px auto 10px; width:800px; 
        padding:10px; text-align:left; }

        #left{margin-right:160px; border:solid 1px;}

        #right{float:right; border:solid 1px; width:150px;}

    </style>

</head>

<body>

    <div id="wrapper">

        <div id="right">
            <h2>Right</h2>
        </div>

        <div id="left">
            <h2>Left</h2>
        </div>

    </div>

</body>

</html>

Answer 1

使用绝对和相对定位：

#wrapper {
  position: relative;
}

#right {
  position: absolute;
  bottom: 0;
  right: 0;
}

Demo

将div与兄弟div的底部对齐，而不知道兄弟div的高度

1 个答案: