绝对定位div宽度如何自适应内容。

发布于 2022-09-05 15:47:33 字数 1052 浏览 31 评论 0

.parent {
            width: 500px;
            height: 500px;
            background: red;
            margin: 150px auto;
            position: relative;
        }
        .child {
            left: 300px;
            top: 200px;
            background: yellow;
            position: absolute; 
            width: auto;
            font-size: 16px;
            line-height: 16px;
            max-width: 500px;
        }
<div class="parent">
        <div class="child">
            地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图
        </div>
    </div>

clipboard.png

child并没有跟着内容自适应,而是自动换行了。

希望结果是

clipboard.png
想问下这个如何实现。

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

扫码二维码加入Web技术交流群

发布评论

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

评论(7

蓦然回首 2022-09-12 15:47:33

在.child新增css属性white-space: nowrap;

.child {
    left: 300px;
    top: 200px;
    background: yellow;
    position: absolute;
    width: auto;
    font-size: 16px;
    line-height: 16px;
    max-width: 500px;
    white-space: nowrap;
}
鲜肉鲜肉永远不皱 2022-09-12 15:47:33

因为规范的原因默认就这么显示了,解决办法的话你这里给的不够详细,需要具体的场景,外层代码,业务需求都要知道。才能给出我的方案。
解释下不能自适应式的原因:绝对定位不可替换元素的宽度计算中,如果width,rightautoleft不为auto
那么宽度=min(max(首选最小宽度, 可用宽度), 首选宽度)

3个宽度说明:

  1. 首选宽度:按照不自动断行的方式排版,取得的内容宽度(可以理解为不受容器限制自动排列的宽度就是你想要的效果)

  2. 首选最小宽度:calculate the preferred minimum width, e.g.,by trying all possible line breaks(我理解就是在1的情况下你把容器不断缩小到不能换行,一般是单个文字的宽度)

  3. 可用宽度:就是把right设置为0,计算出的width

辞取 2022-09-12 15:47:33

max-width:500px;改成width:500px;

乱了心跳 2022-09-12 15:47:33

考虑css3属性吗?
父级添加display:flex;justify-content:center;align-items:center。

罗罗贝儿 2022-09-12 15:47:33

定宽,或者改成right:-300px;

穿透光 2022-09-12 15:47:33

position值为absolute时,子元素宽度默认自适应父元素,不会越界,要实现你的想法要定宽,不能auto
position值为relative时,子元素宽度默认和父元素宽度一致,即500px,调整定位值即可

甲如呢乙后呢 2022-09-12 15:47:33

我遇到了相同的问题,我在parent和child之间加了一个固定宽度(子元素的最大宽度)的div,这样一来子元素就能根据这个宽度自适应了,因为中间的div宽度可能导致对齐问题需要单独处理

.parent {
        width: 500px;
        height: 500px;
        background: red;
        margin: 150px auto;
        position: relative;
    }
    .childContainer {
        width: 500px;  // 与子元素最大宽度相同
        text-align: right;  // 子元素对齐方向
    }
    .child {
        display: inline-block;  //子元素布局方式变为行内
        left: 300px;
        top: 200px;
        background: yellow;
        position: absolute; 
        width: auto;
        font-size: 16px;
        line-height: 16px;
        max-width: 500px;
    }
<div class="parent">
    <div class="childContainer">
        <div class="child">
            地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图
        </div>
    </div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文