0

我有以下 HTML：

<div class="columns">
  <div class="column">
    foo
  </div>
</div>

以及以下 CSS：

.columns
{
    position: relative;
    width: 100%;
}

.column
{
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: auto;
    margin: 0 0 0 10px;
}

渲染时，.columns div 的高度为零。如何获取 .column div 的高度？

我最终想要在这里做的是使用顶部/底部和绝对定位来创建一行柱状内容，但能够从本质上“清除” .columns 元素，以便我可以将东西放在它下面。

（我试图在没有浮动/清除的情况下执行此操作，以允许固定流体固定的三列布局，其中列从左到右以正确的顺序排列。）

4

2 回答 2

0

不幸的是，您需要<br style="clear:both;">在列外的内列来执行此操作。我不认为有其他方法。另外，我会删除bottom: 0;没有做任何事情并且可能会产生问题的那个。

于 2012-07-06T19:02:52.013 回答
0

你可以让你的列内联块。这将允许您将它们并排放置，而无需制作它们position:absolute;，从而允许父级包含它们。

例子

虽然这不使用浮动/清除，但它具有与浮动类似的效果，因此可能不是您想要的。但是，我想我会指出它，因为您可以找到解决此问题的方法（不完全确定您想要什么，否则我会尝试）。

此外，虽然这是一个（很糟糕的）表 hack，但您可以制作.columnsadisplay:table;和.columna display:table-cell;，这会产生有趣的结果。

于 2012-07-06T19:52:05.090 回答