当前位置：首页 > VUE

vue如何实现两栏布局

2026-02-09 20:10:30VUE

使用Flexbox实现两栏布局

Flexbox是CSS3中一种灵活的布局方式，可以轻松实现两栏布局。在Vue中，可以直接在组件的style标签中编写Flexbox代码。

<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;
  background-color: #f0f0f0;
}
.right-column {
  flex: 1;
  background-color: #e0e0e0;
}
</style>

使用Grid布局实现两栏布局

CSS Grid布局是另一种现代布局方式，可以更精确地控制行列。

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

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid-left {
  background-color: #f0f0f0;
}
.grid-right {
  background-color: #e0e0e0;
}
</style>

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

虽然浮动布局已经逐渐被Flexbox和Grid取代，但在某些场景下仍然有用。

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

<style scoped>
.float-left {
  float: left;
  width: 50%;
  background-color: #f0f0f0;
}
.float-right {
  float: right;
  width: 50%;
  background-color: #e0e0e0;
}
</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-direction: column;
}

@media (min-width: 768px) {
  .responsive-container {
    flex-direction: row;
  }
  .responsive-left, .responsive-right {
    flex: 1;
  }
}
</style>

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

可以通过Vue的组件系统和props实现更灵活的两栏布局。

<template>
  <TwoColumnLayout :leftWidth="30" :rightWidth="70">
    <template #left>
      <LeftComponent />
    </template>
    <template #right>
      <RightComponent />
    </template>
  </TwoColumnLayout>
</template>

<script>
import TwoColumnLayout from './TwoColumnLayout.vue'
import LeftComponent from './LeftComponent.vue'
import RightComponent from './RightComponent.vue'

export default {
  components: {
    TwoColumnLayout,
    LeftComponent,
    RightComponent
  }
}
</script>

在TwoColumnLayout.vue中：

<template>
  <div class="two-column" :style="gridStyle">
    <div class="left-column">
      <slot name="left"></slot>
    </div>
    <div class="right-column">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    leftWidth: {
      type: Number,
      default: 50
    },
    rightWidth: {
      type: Number,
      default: 50
    }
  },
  computed: {
    gridStyle() {
      return {
        display: 'grid',
        gridTemplateColumns: `${this.leftWidth}% ${this.rightWidth}%`
      }
    }
  }
}
</script>

vue如何实现两栏布局