vue两个div左右布局

在Vue.js中创建一个简单的两个div进行左右布局，你可以使用Flexbox布局或者Grid布局。以下是两种常见的方法：

**方法一：使用Flexbox**
HTML部分：

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

CSS部分：

.container {
  display: flex;
  justify-content: space-between; /* 左边距 */
}
.left,
.right {
  flex: 0 0 auto; /* 确保宽度不会改变 */
}

**方法二：使用Grid布局**
HTML部分：

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

CSS部分：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 列数1：1，表示等分 */
  gap: 10px; /* 间隔 */
}
.grid-item {
  padding: 10px; /* 样式调整，如需 */
}
.left, .right {
  /* 如果有特定样式，可以在此添加 */
}

记得在实际项目中引入相应的CSS库或自定义样式。