gpt4 book ai didi

CSS - 当内容超出宽度/高度参数时启用绝对定位 DIV 的 "auto expand"

转载 作者:技术小花猫 更新时间:2023-10-29 11:32:13 29 4
gpt4 key购买 nike

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

当插入超出其边界的内容时,如何使绝对定位的 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 中制作一个子模板)。非常感谢任何示例/资源。

干杯,智者 Angular 斗士

最佳答案

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

关于CSS - 当内容超出宽度/高度参数时启用绝对定位 DIV 的 "auto expand",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6686303/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com