Question

在图像中，您会看到浮动框。框的左上角（0,0）与父div的顶部对齐，即第3行。

我试图让浮动框的左下角与父div的中间对齐。

我正在使用CSS：

.video_desc_box_open {
position: absolute; 
left: 500px;
width: 301px;
}

底部：0;不起作用。它将它推到页面的很远处。

我也对JS解决方案持开放态度：）

谢谢！

编辑：几乎忘了，高度是动态的。

HTML：

<div class="video_odd">
<div class="video_list_viewed" >
<img src="viewed_no_odd.jpg" />
</div>
<div class="video_list_number">
3
</div>
<div class="video_list_title">
<a id="show-panel" class="show-panel" href="#">Title to vid</a>
</div>
<div class="video_list_desc">
Text goes here
</div>
<div class="video_desc_box">
<img src="desc_box_top.png" />
<div class="video_desc_box_text">
Text for the desc goes here
Run Time:1:21
<br>
Desc goes here
</div>
<img src="desc_box_bottom.png" />
</div>
<div class="video_list_post_date">
02/01/2011
</div>
<div class="video_list_run_time">
1:21
</div>
</div>

Answer 1

将position:relative;添加到框的父级，然后使用bottom对齐。

Answer 2

我想我有点理解你的问题，试试这个：

#parent_div {

position:relative

}

.video_desc_box_open {
    position: absolute; 
    top:-50%
    left: 500px;
    width: 301px;

}

如果您可以提供实时代码，则可以更轻松地提供帮助：）

CSS位置绝对对齐div的底部与父级

2 个答案: