.content { display: flex; flex-direction: column; box-sizing: border-box; width: 100vw; height: 100vh; } .main { background-color: var(--rgb111); display: flex; flex-direction: row; width: 96vw; height: 92vh; padding: 0 2vw; } .main .one { width: 24vw; color: var(--rgbfff); margin: 0 10px 0 0; background-color: var(--rgb000); overflow-y: auto; } .main .one .list ._span { display: inline-block; width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; } .main .two { flex-grow: 1; color: var(--rgbfff); background-color: var(--rgb000); padding: 0 2vw; overflow-y: auto; } .main .two .two_1 { padding: 1vw 0; } .main .two .two_2 { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; } .main .two .two_2 .list { width: 30%; position: relative; margin: 0 0 10px 0; } .main .two .two_2 .list .image { width: 100%; height: 70px; border-radius: 5px; } .main .two .two_2 .list .name { position: absolute; bottom: 10px; width: 100%; text-align: center; left: 0; color: var(--rgb000); font-size: 12px; }