CSS - 啓用「自動展開」絕對定位的DIV當內容超出寬度/高度參數

一種怪異的例子，但這裏有雲：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內容「a」被隱藏（由於寬度/高度限制）。如果我們將其設置爲「min-height」和「min-width」，則內容位於其他div的「後面」，但不會移動它們。我怎樣才能做到這一點？

注意：我試圖弄清楚這一點，因爲我需要「重新定位」DIV在HTML中排序的順序（我試圖在Wordpress中製作子模板）。任何示例/資源都非常感謝。

乾杯， Sapiensgladio

來源

2011-07-13 sapiensgladio

如果您需要重新定位真正改變事物的div順序，您最好使用jQuery解決方案重新排列元素。 – BumbleB2na

可以使用min-height和min-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。

前面的演示中使用jQuery的額外內容添加到#content DIV，但是這只是動態演示的目的，jQuery是不，以任何方式，對CSS的工作需要。

來源

2011-07-13 22:10:53

+1提供了一個很棒的演示！ – brenjt

很好的答案+1 – BumbleB2na

CSS - 啓用「自動展開」絕對定位的DIV當內容超出寬度/高度參數

回答

相關問題