vue 两个div并排显示
时间: 2023-08-12 20:07:28 浏览: 350
让两个Div并排显示的多种方法
5星 · 资源好评率100%
要在Vue中实现两个div并排显示,可以使用CSS的flexbox来实现。以下是一个示例代码:
```html
<template>
<div class="container">
<div class="item">Div 1</div>
<div class="item">Div 2</div>
</div>
</template>
<style>
.container {
display: flex;
}
.item {
flex: 1;
margin: 10px;
}
</style>
```
在上面的示例中,我们使用了一个名为`container`的div作为容器,并将其样式设置为`display: flex;`,这将启用flexbox布局。
然后,我们在容器中放置两个名为`item`的div,这些div将并排显示。通过设置`flex: 1;`,我们使每个`item`div都占据相等的空间,并通过设置`margin`为10px来为它们添加间距。
这样,两个div就能够并排显示在Vue应用中了。
阅读全文