代码之家  ›  专栏  ›  技术社区  ›  flavour404

CSS布局问题为什么具有绝对位置的DIV不能识别封装的TD单元

css
  •  0
  • flavour404  · 技术社区  · 14 年前

    我有下面的安排。我的问题是,为什么第一个DIV标记不与单元格顶部对齐,而是向下移动到图像的顶部(IE和Firefox等)?绝对定位不会起作用,因为看起来DIV不会将TD单元识别为其父单元,而是移动到文档顶部。有办法解决这个问题吗?

    <td style="width:33%;height:100%; border:solid 1px black; position:relative;">
    
                            <div style="vertical-align:top;">test</div>
    
                            <div style="text-align:center; vertical-align:middle;padding-bottom:120px; padding-top:30px;">
                                <img src="<%=LastThumb%>" style="vertical-align:middle; border:solid 1px black;" alt="" />
                            </div>
                        </td>
    
    1 回复  |  直到 12 年前
        1
  •  0
  •   L0j1k    12 年前

    你说得对 position:absolute; 将导致元素从其他元素的常规流中完全移除,并使DIV(及其子级)随后相对于文档窗口本身而不是其父级。

    您还使用了<DIV>元素,它们是 块级别 元素。因此,浏览器总是在每行中只放置一个由换行符分隔的位置。你可以通过增加 display:inline-block; 两个divs的css样式。这将导致两个潜水器被视为 内联的 元素,允许您将一个元素放置在另一个元素的“顶部”。