相对绝对定位父元素不设置宽度，根据子元素撑开(white-space: nowrap；)

**相对绝对定位父元素不设置宽度，根据子元素撑开**

在CSS布局中，我们经常会遇到需要让父元素根据子元素的内容撑开，而不是固定宽度的情况。这种需求经常出现在需要实现响应式设计、自适应布局等场景下。在本文中，我们将探讨如何使用相对绝对定位来实现这一效果。

### 相对绝对定位首先，让我们回顾一下CSS中的相对和绝对定位的概念：

* **相对定位**（relative）：相对于自身位置进行偏移，不影响其他元素的布局。
* **绝对定位**（absolute）：脱离文档流，根据最近的一个已定位祖先元素或是包含块来进行定位。

### 实现相对绝对定位父元素不设置宽度，根据子元素撑开为了实现这一效果，我们需要使用CSS的`flexbox`布局模型或者`grid`布局模型。这里我们将选择`flexbox`作为示例，因为它更容易理解和使用。

#### flexbox 实现

css.parent {
 /* 不设置宽度，让子元素撑开 */
 width: auto;
 display: flex; /* 使用flexbox布局 */
 flex-direction: row; /* 子元素水平排列 */
}

.child {
 white-space: nowrap; /* 子元素内容不换行 */
}

在上述代码中，我们设置了`.parent`的`display`属性为`flex`，并且指定了`flex-direction`为`row`，这样子元素就可以水平排列。同时，我们设置了`.child`的`white-space`属性为`nowrap`，使得子元素内容不换行。

#### grid 实现

css.parent {
 /* 不设置宽度，让子元素撑开 */
 width: auto;
 display: grid; /* 使用grid布局 */
 grid-template-columns: repeat(auto-fill, minmax(0,1fr)); /* 子元素自动填充 */
}

.child {
 white-space: nowrap; /* 子元素内容不换行 */
}

在上述代码中，我们设置了`.parent`的`display`属性为`grid`，并且指定了`grid-template-columns`为`repeat(auto-fill, minmax(0,1fr))`，这样子元素就可以自动填充。同时，我们设置了`.child`的`white-space`属性为`nowrap`，使得子元素内容不换行。

### 总结通过使用CSS的flexbox布局模型或者grid布局模型，我们可以轻松实现相对绝对定位父元素不设置宽度，根据子元素撑开。这种需求经常出现在需要实现响应式设计、自适应布局等场景下。在本文中，我们探讨了flexbox和grid两种方法，并提供了示例代码。

### 相关阅读* [CSS Flexbox 布局]( />* [CSS Grid 布局]( />
### 最后希望本文能够帮助你更好地理解和使用CSS的flexbox布局模型或者grid布局模型。记得在实际项目中灵活运用这些知识，根据具体需求选择合适的方法。