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

Question

<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，在底部显示第二个页脚two标记。

在那里放置后，我得到错误作为

模板根只需要一个元素。eslint-plugin-vue

Answer 1

您可以使用flexbox。

当您使用display: flex时，由于其默认flex-position: row，它会并排对齐flex-items。但是，要使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>