在容器和 jQuery 中使用 position: absolute答案

【问题标题】：Using position: absolute in a container and jQuery在容器和 jQuery 中使用 position: absolute
【发布时间】：2011-11-16 20:38:07
【问题描述】：

所有，我正在尝试设置我的定位，但我遇到了一些问题。你可以在这里查看代码：

http://jsfiddle.net/treeleaf20/2cwQp/

我正在尝试让评论始终位于 reviews_container 的中心。您可以单击箭头，它实际上会更改文本。我想让它出现的评论垂直显示在中间，中间的箭头在它们的侧面。您能提供的任何帮助将不胜感激！我发现我可以旋转评论并使它们看起来不错的唯一方法是通过绝对定位，但它们我的其他元素看起来不正确。

谢谢！

【问题讨论】：

标签： jquery css html containers css-position

【解决方案1】：

您可以尝试将外部容器的位置设置为relative，但使用基于 CSS 表格的布局可能会更好：

<style type="text/css">   
#container {    
    display:table;    
    border-collapse:collapse;    
}         
#layout {    
    display:table-row;    
}           
#content {    
    text-align:center; 
    display:table-cell;    
}           
</style>        
<div id="container">    
    <div id="layout">    
        <div id="content"> 
            <!-- content here --> 
        </div>  
    </div>   
</div>

【讨论】：

我将位置设为相对位置，这样看起来更好。但是，我现在的问题是，当我单击箭头时，它将传入的 div 向下移动，然后向上移动到它的位置。我使用的是 position: absolute 所以 div 总是在顶部。