CSS - 绝对定位 子元素受父元素影响 无法宽度自适应

要做一个如下的弹窗，很简单。但是当要切换成多语言或者数据是动态的话（title可能会很长），那么弹窗固定宽度就不适用了。ps:ml-18 f30 text-333 flex align-center 一些封装的样式。也有可能出现下面的情况，文字被换行了（有时候这种情况也是可以的，取决于项目要求）1.弹窗不设置width，但是可以设置最小宽度（min-width）2.整体布局正常（我这边用的是弹性布局），重点是。这种情况是弹窗不设置width，设置。但是我想要的是下图的样式。有可能会出现下图的情况。

http://blog.csdn.net/isaisai/article/details/45640515 设置left:0,right:0 转载于:https://www.cnblogs.com/aiyr/p/8286778.html

在我们日常开发中经常会遇到卡片布局，比如展示产品、文章、照片等页面。✅ 屏幕变窄时，铺满整个屏幕，当不足以分给每个卡片最小宽度时，自动换行。✅屏幕变宽时，页面尽可能分割成更多列，右侧一定程度上会产生空白区域。✅ 屏幕变窄时，不足以分给每个卡片最小宽度时，自动换行。✅小于卡片宽度自动换行，但右侧会出现空白区域。1. 使用auto-fill。1. 将div变成行内元素。3. 使用auto-fit。✅ 每个卡片设置最小宽度。2. 使用flex布局。✅ 每个卡片设置最小宽度。✅ 每个卡片固定宽度。

由于设置了绝对定位，宽度以子元素内容的宽度一致，此时设置什么最小宽度那些都没用，但是又不能写死宽度，需要根据内容来撑开 采用 white-space: nowrap；强制不换行，让其内容撑开 position: absolute; white-space: nowrap; 前 后 ...

css绝对定位的元素，如果不设定宽度，宽度如何计算？

1.如果自适应子元素里面是文本，同时无需兼容到ie8以下的的话，可以给子元素添加word-break: keep-all来曲线实现 2.如果不是文本，中间再套一层元素，a>b>c，a是原来父元素，写死宽度，b是新加的，也是relative，也写死宽度，但是写非常大，比如9999px，c是原来子元素 转载于:https://www.cnblogs.com/larennani/p/675...

今天遇到父元素高度无法自适应子元素的高度问题，试了各种清除浮动都无效，各种百度才弄明白。 问题描述：父元素有position：relative ；两个子元素都是position：absolute；（因为经常念叨父R子A习惯性布局）； 中间试了各种清除浮动的办法，均无法使父元素产生高度； 产生原因：因为position：absolute会脱离标准流，所以父元素无法自适应子元素高度，而清除...

。

脱离文档流的两种方法：float 和 position:absolute/fixed 前提：父元素高度自动，需要子元素撑开父元素 当子元素使用 float 时，脱离文档流，父元素高度塌陷，但是可以使用 zoom:1 + 伪元素 使其清除浮动，从而使得父元素高度被子元素撑开。   当子元素使用absolute时，使用 jq 获取子元素高度，再赋给父元素即可： $('body').css(...

给子元素设置了position: absolute;会相对最近开启定位的父元素进行布局，如果子元素同时设置了width:100%;那么子元素的宽度是父元素的100%（包括padding），也就是padding对设置了**position:absolute;**的子元素无效 解决方案: 1.把position: absolute改为position: sticky;**** 2.再添加样式left:0;right:0; 这样子元素就会可以实现脱离文档流并且宽度是限制在父元素的padding内的 对于一些遮罩层

在一个大屏展示页面中，使用了全局绝对定位，元素相对于父元素（全局）进行绝对定位，元素气泡描述再次使用了绝对定位，气泡相对于元素进行绝对定位。气泡描述有两行数字描述，需要自适应宽度。

经常写hover 效果的时候，不经意间，父级有宽度，而hover 里的内容是撑开的，正常情况下 hover 的宽度，不是撑开的就会继承父级的宽度：例如hover 文字撑开一行，撑开的，但是父级有宽度，就会继承父级导致hover 里的文字换行。这往往是我们不想要的。解决办法就是，white-space:nowrap 属性。根本不用写js。用法就是在需要宽度自动撑开的元素上面添加样式： white...

由于子元素设置绝对定位脱离文档流后，最大宽度受限于父元素宽度，可以通过设置white-space: nowrap来强制子元素变为一行 https://segmentfault.com/q/1010000013893079...

代码 .box { position: relative; margin: 50px; width: 150px; height: 200px; background-color: #999; } .tooltip { position: absolute; top: 50px; left: 200px; max-width: 200px; ...