CSS - 当内容超出宽度/高度参数时,启用绝对定位DIV的“自动扩展”

时间:2011-07-13 22:08:56

标签: css wordpress-theming

有点奇怪的例子,但这里有:

当插入超出其边界的内容时,如何让绝对定位的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的“后面”,但不会移动它们。我怎么能做到这一点?

注意:我正在试图解决这个问题,因为我需要“重新定位”在HTML中订购DIV的顺序(我正在尝试在Wordpress中创建子模板)。任何示例/资源都非常受欢迎。

干杯, Sapiensgladio

1 个答案:

答案 0 :(得分:7)

您可以使用min-heightmin-width来定义这些维度的最小值,这些维度将根据需要进行扩展,以适应新的/额外的/更大的内容。

您可以使用max-heightmax-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工作所需。