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 要素を「クリア」して、その下に何かを配置できるようにすることです。

(フロート/クリアなしでこれを実行しようとしています。これにより、列が左から右に正しい順序で配置された、固定-流体-固定の 3 列のレイアウトが可能になります。)

4

2 に答える 2

0

列をインラインブロックにすることができます。これにより、それらを作成せずに並べて配置position:absolute;できるようになり、親がそれらを含めることができるようになります。

例

これはフロート/クリアを使用しませんが、フロートと同様の効果があるため、希望どおりにならない場合があります。ただし、これで回避策を見つけることができるかもしれないので、私はそれを指摘すると思いました（あなたが何を望んでいるかは正確にはわかりません、そうでなければ私は試します）。

また、これは（うんざりする）テーブルハックですが.columns、display:table;とを作成し.columnてdisplay:table-cell;、興味深い結果を得ることができます。

于 2012-07-06T19:52:05.090 に答える
0

<br style="clear:both;">残念ながら、これを行うには列の外側に内側の列が必要です。他の方法はないと思います。bottom: 0;また、何もしていない を削除し、問題を引き起こす可能性があります。

于 2012-07-06T19:02:52.013 に答える