如何避免隐藏 CSS 侧边栏时内容被挤压？

css 左右布局：在隐藏右侧面板时防止其内容挤压

在 css 布局中，实现左侧为主面板、右侧为次要面板的布局时，可以通过改变右侧面板的宽度来隐藏它。但是，当右侧面板宽度逐渐减小到 0 时，内部内容可能会受到挤压和变形。以下是如何解决此问题的步骤：

1. 创建内层 p：在右侧面板内部创建一个 p，并为其宽度设置为一个固定值，如：

.detail-content {
  width: 350px;
  ...
}

登录后复制

2. 设置内层 p 的 white-space 为 nowrap：这将防止内容在内层 p 内部换行。

.detail-content {
  ...
  white-space: nowrap;
}

登录后复制

3. 设置外层 p 宽度影响内层 p：为外层 p 添加一个关闭类，当该类生效时，将其宽度设置为 0。这将隐藏外层 p，但不会影响内部内容。

.detail-area.closed {
  width: 0;
}

登录后复制

通过上述步骤，当外层 p 宽度减小到 0 时，内层 p 的内容将保持不变，不会受到挤压。

<template><p class="detail-area" :class="!isshowdetailpanel ? 'closed' : ''">
    <p class="detail-content">
      内容内容内容...
    </p>
  </p>
</template>

登录后复制

.detail-area {
  width: 350px;
  ...
  transition: all $delay;
  margin-left: 2px;
  &.closed {
    width: 0;
  }

  .detail-content {
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

登录后复制

以上就是如何避免隐藏 CSS 侧边栏时内容被挤压？的详细内容，更多请关注抖狐科技其它相关文章！