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的“后面”,但不会移动它们.我怎么能做到这一点？

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

干杯,
Sapiensgladio

解决方法

您可以使用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工作所必需的.

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

解决方法

相关推荐