vue中div左右分右边占五分之一

在Vue.js中，如果你想让一个`<div>`元素水平布局，并且右侧部分占据总宽度的五分之一，可以使用CSS Flexbox或者Grid布局来实现。这里我们以Flexbox为例来说明：

首先，在HTML结构上保持简单，假设有一个父容器`<div class="parent">`，里面有两个子元素`<div class="left">`和`<div class="right">`。

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

然后，在CSS样式中设置`.parent`为flex布局，并给`.right`分配20%（即五分之一）的宽度：

.parent {
  display: flex;
  justify-content: space-between; /* 默认就是等间距分布 */
}

.right {
  flex: 0 0 calc(20%); /* 使用calc()计算百分比并确保不随父元素缩放 */
}

`justify-content: space-between;`会让其他未指定空间的flex项目均匀分布在剩余的空间里，而`.right`始终占据固定比例。