css - 怎样让相邻的两个元素高度一样？

问题描述

问 题

如下图所属，希望右侧区域的高度能与左侧一致，通过布局和CSS应该怎样实现？

解决方案

可以使用 flex或者 负margin解决

html 结构

<section>
    <nav>
        111   
    </nav>
    <main>
        111
        <br />
        222
    </main>
</section>

flex方案

section {
    display: flex;
    flex-direction: row;
}
nav {
    width: 50%;
    background: red;
}
main {
    width: 50%;
    background: blue;
}

负margin

section {
    overflow: hidden;
    width: 100%;
}
nav {
    float: left;
    width: 50%;
    margin-bottom: -20000px;
    padding-bottom: 20000px;
    background: red;
}
main {
    float: left;
    width: 50%;
    margin-bottom: -20000px;
    padding-bottom: 20000px;
    background: blue;
}

这篇关于css - 怎样让相邻的两个元素高度一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！