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

发布于 2024-11-19 19:43:32 字数 1373 浏览 0 评论 0原文

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

当插入超出其边界的内容时，如何获得绝对定位的 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 中创建一个子模板）。非常感谢任何示例/资源。

干杯，智人剑兰

原文

Kind of a weird example, but here goes:

How do I get an absolutely positioned DIV to expand when content is inserted that goes beyond its borders? Here is the code:

<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>

In the example above, the content in DIV "a" is hidden (due to the width/height restrictions). If we set this to "min-height" and "min-width" the content just sits "behind" the other divs, but doesn't move them. How can I accomplish this?

Note: I'm trying to figure this out, as I need to "reposition" the order in which DIVs are ordered in the HTML (I'm trying to make a child template in Wordpress). Any examples/resources are GREATLY appreciated.

Cheers,
Sapiensgladio

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍景流年 2024-11-26 19:43:32

您可以使用 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 演示。

上面的演示使用 jQuery 向 #content div 添加额外的内容，但这只是出于动态演示的目的，jQuery 不是，在无论如何，CSS 工作所必需的。

You can use min-height and min-width to define the minimum values for those dimensions, which will be expanded to accommodate new/additional/larger content as necessary.

You can couple with the max-height and max-width attributes, which will allow the elements to move from the minimum, as necessary, to the maximum permitted value for the dimension.

Example 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.

The above demo uses jQuery to add extra content to the #content div, but that's just for dynamic demonstration purposes, the jQuery is not, in any way, required for the css to work.

回复收藏 0 原文

~没有更多了~