在 CSS 中，如何优雅地隐藏并列布局中的右侧面板而不挤压其内容？

本篇文章给大家分享《在 CSS 中，如何优雅地隐藏并列布局中的右侧面板而不挤压其内容？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

css 左右布局之优雅隐藏右侧面板

在 css 布局中，实现左右并列布局是常见需求。但当需要隐藏右侧面板时，又不想其内容受到挤压，该如何操作呢？

समस्या

如下 vue 代码所示，右侧面板的宽度在缩小时，其内容也会随之挤压：

解决办法

要解决此问题，关键在于在不压缩右侧面板内容的情况下，改变外层宽度。

使用 white-space: nowrap 可以禁止子元素换行，从而实现上述目的。具体操作如下：

1. 套一层 div

在右侧面板内套一层 div，用于包裹需要保持不被挤压的内容。

  

    ...
  

2. 内外层设置样式

设置外层 div 宽度为 350px，高 100%，overflow 为 hidden。内层 div 采用绝对定位，且宽高均为 100%，设置 white-space 为 nowrap。

.detail-area{
  width: 350px;
  height: 100%;
  background: $bg-block;
  transition: all $delay;
  margin-left: 2px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  &.closed{
    width: 0;
  }
  .detail-content{
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    white-space: nowrap;
  }
}

采用这种方式，右侧面板内的内容不会在宽度改变时受到影响，从而实现优雅隐藏。

今天关于《在 CSS 中，如何优雅地隐藏并列布局中的右侧面板而不挤压其内容？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！