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

发布日期： 2024-10-24 阅读量： 作者： 网络

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

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

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

समस्या

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

<template>
  <div class="about">
    <div class="lft">
      <button @click="() => isshowright = !isshowright">显示/隐藏</button>
    </div>
    <div class="rht" :class="!isshowright ? 'closed' : ''">
      <div>隐藏右侧区块后，这些内容怎么不隐藏，还会受到挤压？</div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      isshowright: true
    }
  },
  methods: {

  }
}
</script>

<style lang='css' scoped>
.about{
  height: 100%;
  width: 100%;
  display: flex;
}
.lft, .rht{
  height: 100%;
}
.lft{
  flex: 1;
  background: #e3e3e3;
}
.rht{
  transition: all 3s;
  width: 400px;
  background: rgb(201, 186, 186);
}
.closed{
  overflow: hidden;
  width: 0;
}
</style>

# css # vue # ai # 绝对定位 # overflow

上一篇: 如何通过微信小程序获取用户手机号

下一篇: 关于微信小程序上传图片到服务器的代码

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

随便看看