2011-07-13 14 views
5

種類のパラメータが、ここに行く:CSS - コンテンツの幅/高さを超えて拡張したときに絶対位置DIVの「自動拡張」を有効には、奇妙な例の

私は内容が挿入されたときに展開する絶対位置のDIVを取得するにはどうすればよいですその国境を越えて行く?ここでコードである:

<html> 
<head> 
    <style> 
     * {margin: 0; padding: 0;} 
     body {white-space: nowrap; text-align: center; color: white; font-size: 2em;} 
     div#container {position: relative; height: 100px; width: 50px;} 

     div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;} 
     div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0} 
     div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}   
     div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;} 

     span#title {position: relative; overflow: visible} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="a"><span id="title">This is my title</span></div> 
     <div id="b">B</div> 
     <div id="c">C</div> 
     <div id="d">D</div> 
    </div> 
</body> 

上記の例では、DIVにおけるコンテンツ「」(これは、幅/高さの制限に)隠されています。これを「min-height」と「min-width」に設定すると、コンテンツは他のdivの「背後」に置かれますが、移動することはありません。どうすればこれを達成できますか?

注:DIVがHTMLで注文される順序を「再配置」する必要があるため、これを理解しようとしています(Wordpressで子テンプレートを作成しようとしています)。どんな事例/リソースも大いに感謝しています。

乾杯、

Sapiensgladio
+0

本当に物事を変更するdivの順序を変更する必要がある場合は、要素を並べ替えるためにjQueryソリューションを使用することをお勧めします。 – BumbleB2na

答えて

7

あなたは必要に応じて新たな/追加/大きいコンテンツを収容するように拡張される、それらの寸法の最小値を定義するmin-heightmin-widthを使用することができます。

max-height属性とmax-width属性を組み合わせると、必要に応じて最小値から最小許容値まで要素を移動できます。

例CSS:

#content { 
    position: absolute; 
    min-height: 5em; 
    max-height: 15em; 
    min-width: 5em; 
    max-width: 15em; 
    border: 1px solid #f90; 
    bottom: 0.5em; 
    right: 0.5em; 
    overflow: auto; 
} 

JS Fiddle demo

上記のデモが#contentのdivに余分なコンテンツを追加するためのjQueryを使用していますが、それは単にダイナミックデモの目的のためだ、jQueryのCSSが動作するために必要な、どのような方法で、ないです。

+0

+1デモを提供してください! – brenjt

+0

偉大な答え+1 – BumbleB2na

関連する問題