当前位置：首页 > VUE

vue如何实现两栏布局

2026-01-07 05:53:13VUE

使用 Flexbox 实现两栏布局

通过 Flexbox 可以快速实现两栏布局，适合现代浏览器。在 Vue 的模板中，使用 display: flex 和 flex 属性控制两栏的宽度比例。

<template>
  <div class="container">
    <div class="left-column">左侧内容</div>
    <div class="right-column">右侧内容</div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
}
.left-column {
  flex: 1; /* 左侧占 1 份 */
}
.right-column {
  flex: 3; /* 右侧占 3 份 */
}
</style>

使用 Grid 布局实现两栏布局

CSS Grid 提供了更灵活的布局方式，适合复杂场景。通过 grid-template-columns 定义两栏的宽度比例。

vue如何实现两栏布局

<template>
  <div class="grid-container">
    <div class="left">左侧内容</div>
    <div class="right">右侧内容</div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 左侧 1 份，右侧 3 份 */
  gap: 10px; /* 可选：设置间距 */
}
</style>

使用浮动实现传统两栏布局

浮动布局是传统方法，适合需要兼容旧浏览器的场景。注意清除浮动以避免布局问题。

vue如何实现两栏布局

<template>
  <div class="float-container">
    <div class="left-float">左侧内容</div>
    <div class="right-float">右侧内容</div>
    <div style="clear: both;"></div> <!-- 清除浮动 -->
  </div>
</template>

<style scoped>
.left-float {
  float: left;
  width: 25%;
}
.right-float {
  float: right;
  width: 75%;
}
</style>

使用 Vue 组件实现动态两栏布局

通过 Vue 的动态绑定，可以灵活调整两栏的宽度或显隐状态。

<template>
  <div class="dynamic-container">
    <div 
      class="dynamic-left" 
      :style="{ width: leftWidth }"
    >左侧内容</div>
    <div class="dynamic-right">右侧内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: '30%' // 可动态修改
    }
  }
}
</script>

<style scoped>
.dynamic-container {
  display: flex;
}
.dynamic-right {
  flex: 1;
}
</style>

响应式两栏布局

结合媒体查询，可以在移动端将两栏布局切换为单栏。

<template>
  <div class="responsive-container">
    <div class="responsive-left">左侧内容</div>
    <div class="responsive-right">右侧内容</div>
  </div>
</template>

<style scoped>
.responsive-container {
  display: flex;
  flex-wrap: wrap;
}
.responsive-left {
  flex: 1;
  min-width: 200px;
}
.responsive-right {
  flex: 3;
  min-width: 300px;
}

@media (max-width: 768px) {
  .responsive-left, 
  .responsive-right {
    flex: 100%; /* 移动端堆叠显示 */
  }
}
</style>