Question

有点奇怪的例子，但这里有：

当插入超出其边界的内容时，如何让绝对定位的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

Answer 1

您可以使用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的“自动扩展”

1 个答案: