求助：页脚中两个Div无法并排显示的布局问题

问题核心：你的父容器.footer.text.parent缺少display: flex属性——flex布局的规则只对设置了display: flex的容器生效，没有这行代码，flex-direction: row等属性完全不起作用，子Div作为块级元素默认上下堆叠。

修改后的CSS代码 #

.footer {    
    background-color: #f9e3ef;
    width: 100vw;
    height: auto;
    text-decoration: none;
    font-size: 2.2vw;
    color: #000000;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-align: center;
    padding: 0.5vw;
    order: 5;
    margin-top: auto;
}

.footer.text.parent {
    display: flex; /* 关键新增：启用flex布局 */
    flex-direction: row;
    justify-content: space-around;
    width: 100vw;
    height: auto;
}

.footer.text {
    color: #000000;
    text-align: center;
    text-decoration: underline black;
    font-size: 2.0vw;
    flex: 1; /* 让两个子元素平分父容器宽度，替代固定50vw */
    order: 6;
    padding: 0 1vw; /* 可选：添加内边距避免内容贴边 */
}

.footer.text a {
    color: #000000;
    text-align: center;
    text-decoration: none;
}

.footer.end {    
    text-align: center;
    font-size: 1.8vw;
    width: 100vw;
    height: auto;
    order: 8;
}

.footer.end a {
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-size: 1.8vw;
}

对应的HTML代码（无需修改，保持原结构即可） #

<div class="footer">
    Contact us!<br>
    <div class="footer text parent">
        <div class="footer text">
            Email:<br>
            Address:<br>
        </div>

        <div class="footer text">
            <a href="" target="_blank">Link to Vendor Form</a><br>
            <a href="" target="_blank">Link to Donation Form</a><br>
            <a href="events.html">Link to Event list</a>
        </div>
    </div>
  
    <div class="footer end">
        <br>Photos of the event by<br>
        <a href="" target="_blank">Website by</a>
    </div>
</div>

额外优化建议 #

• 类名可以调整得更简洁，比如把.footer.text.parent改成.footer-text-container，避免多类选择器的空格混淆（当然原类名也能正常工作）。
• 去掉.footer里重复的text-align: center，保持代码整洁。

内容的提问来源于stack exchange，提问作者Nick