0

メイン コンテンツ エリアと右カラム コンテンツ エリアがあります。右側の列のコンテンツは通常短いです。コンテンツがない場合、メイン コンテンツ エリアのコンテンツを右側にオーバーフローさせるにはどうすればよいですか。

CSS

#left {
    width: 440px;
    float: left;
}
#right {
    margin-top: 60px;
    width: 250px;
    float: right;
    padding-left: 20px;
    border-left: 1px;
}
4

2 に答える 2

2

論理

他のコンテナが空の場合、コンテンツを別のコンテナに流し込む - それはロジックです。CSS にはロジックのメカニズムはありません。少なくともいくつかの JavaScript またはサーバー側のロジック (サーバーから送信された静的 HTML を条件付きで変更する) が必要です。

他のコンテナーが空の場合、JavaScript (またはサーバー側) のロジックによって、コンテンツが流れるようにレイアウトが変更される可能性があります。その流れがどうなるか、CSS だけで可能かどうかは別問題です。これは、最初に関連するロジックに対処しているだけです。

コンテンツの流れ

コンテンツを別のコンテナに流し込むことは、CSS だけでは非常に困難です。一般的に言えば、それはブラウザーでのコンテンツの流れではありません。合理的に得られる最も近いのはCSS3 Columnsを使用することだと思いますが、IE9 以前ではサポートされていません。さらに重要なことは、現在の標準では幅の異なる列の使用がサポートされていないことです。したがって、CSS3 列は既に除外されているようです。

コンテンツ フローの唯一のオプションは、JavaScript またはサーバー側でコンテンツを適切なサイズの断片に分割し、コンテンツの断片を適切な列に配置することであると思われます。

于 2013-03-28T03:42:43.807 に答える
0

右側のサイドバーにコンテンツがあるかどうかを判断するのは困難です。純粋な CSS では判断できません。ただし、とにかく中央のコンテンツをこぼしたい場合はoverflow、CSS でプロパティを呼び出します。

#left {
    width: 440px;
    float: left;
    overflow-x: visible;
}

テキストを折り返したくない場合は、white-spaceプロパティを調べてください。

于 2013-03-28T03:40:43.177 に答える