尝试编写两个div元素时出错模板根需要一个元素.eslint-plugin-vue答案

【问题标题】：Error when trying to write two div elements The template root requires exactly one element.eslint-plugin-vue尝试编写两个div元素时出错模板根需要一个元素.eslint-plugin-vue
【发布时间】：2021-08-12 14:01:45
【问题描述】：

<template>
  <div class="footerpart-container">
    <div class="general-container">
     dadada
    </div>

    <div class="legal-container">
     dadad
    </div>

    <div class="helpsupport-container">
     dadada
    </div>
      
  </div>

<div class="footer-two">
  <div class="follow-us">follow us</div>
 </div>
  
</template>

在一个模板下，我有两个 div 标签，我试图在顶部显示第一个 div，在底部显示第二个 footer-two 标签。

放在那里后我收到错误

模板根只需要一个 element.eslint-plugin-vue

【问题讨论】：

之后？水平还是垂直？
现在他们一个接一个。如果您的意思是并排，那么您似乎已经有了答案。只需将您的 div 包装在另一个 div 中并给它display: flex。

标签： html css vue.js

【解决方案1】：

您可以使用flexbox。

当您使用display: flex 时，它会并排对齐flex-items，因为它的默认flex-position: row。但是要制作 footerpart-container 和 footerparttwo-container 弹性项目，您需要将两个 HTML 元素包装到一个容器中（footer-parent-container）

.footer-parent-container {
  display: flex;
  gap: 1rem;
}

.footerpart-container {
  background-color: #ffffff;
  height: auto;
  display: flex;
}

.footerparttwo-container {
  background-color: #ffffff;
}

<div class="footer-parent-container">
  <div class="footerpart-container">
    <div class="general-container">
      sas
    </div>

    <div class="legal-container">
      <div class="legal-title">Legal</div>

    </div>

    <div class="helpsupport-container">
      <div class="helpsupport-title">Help & support</div>

    </div>
    <div class="whatsup-icon-helpnum">

      <div class="ph-num">180034014</div>
    </div>


  </div>
  <div class="footerparttwo-container">
    <div class="follow-us">follow us</div>
  </div>
</div>

【讨论】：

尝试写入两个 div 元素时出错模板根需要一个 element.eslint-plugin-vue
您只需将这两个 div 包装在一个 div 中