Vue组件设100vw宽度却并排显示，需改为上下布局求助

开发者阿泽

2026-7-10

Vue组件垂直布局解决方案

我将Form和Main（均为App的子组件）宽度设为100vw后，它们仍并排显示，width设置仿佛被忽略。想要Form在上、Main在下的垂直布局，试过所有position属性都无效。

问题原因

大概率是父容器（App组件）的布局样式导致子元素横向排列：比如App用了display: flex但没设置flex-direction: column，或者子组件根元素被全局样式设为inline/inline-block，强制它们在一行显示。另外你当前的样式里，Main的div设置了align-items和justify-content——这两个是flex容器的属性，若该div不是flex容器，这两个属性完全无效，还可能干扰布局判断。

解决步骤

修正父容器（App）布局
如果App用了flex布局，直接设置垂直排列：
```
#app {
    display: flex;
    flex-direction: column; /* 强制子元素垂直排列 */
    padding: 0;
    margin: 0;
}
```
若App是普通块级元素，确保没有设置float或display: inline-block，保持默认的块级流即可。

强制子组件根元素为块级
给Form和Main的根div加上display: block，确保它们独占一行：
Form.vue样式修改：

div {
    display: block;
    position: relative;
    margin: 0;
    width: 100vw;
    text-align: center;
    height: 75vh;
}

form {
    margin-top: 0;
    padding: 8px 0;
    margin: 5px;
}

Main.vue样式修改：

div {
    display: block;
    width: 100vw;
    position: static;
    height: auto;
    overflow: auto;
    text-align: center;
    /* 移除无效的align-items和justify-content */
}