css如何上下对齐且能满足大小屏幕？

Question

这个在笔记本小屏上通过margin能够调整对齐，但是到大的显示器上又不能对齐了，左边这些方框能不能和右边的方框上下对齐
html

<div class="type">
                            <div style="float: left;width: 48%;height: 100%;">
                                <div style="height: 33.33%">
                                    <li align="center" value="1">123</li>
                                </div>
                                <div style="height: 33.33%">
                                    <li align="center" value="2">123</li>
                                </div>
                                <div style="height: 33.33%">
                                    <li align="center" value="3">123</li>
                                </div>
                            </div>
                            <div style="float: right;width: 48%;height: 100%;">
                                <div style="height: 33.33%">
                                    <li align="center" value="4">123</li>
                                </div>
                                <div style="height: 33.33%">
                                    <li align="center" value="5">123</li>
                                </div>
                                <div style="height: 33.33%">
                                    <li align="center" value="6">123</li>
                                </div>
                            </div>
                        </div>
                        <div class="school">
                            <div id="listOne" class="list"><p style="font-family: 隶书;color: #aaabab;font-size: 1.3vw;line-height: 5vw"></p></div>
                            
                        </div>

css:

.type{
    width: 30%;
    height: 100%;
    float: left;
    box-sizing: border-box;
}
.type li{
    cursor:pointer;
    /*margin-bottom: 9%;*/
    border-style:solid;
    border-width:1px;
    border-color:#bd1a2d;
    /*border-radius: 5px;*/
    padding: 8%;
    color: #bd1a2d;
    /*font-weight:bold;*/
    font-size: 1vw;
}
.type li.show {
    background: #f5d389;
    font-weight:bold;
    color: #bd1a2d;
}
.school{
    width: 69%;
    height: 100%;
    float: right;
    box-sizing: border-box;
}
.list{
    height: 100%;
    font-size: 0.9vw;
    display: block;
    line-height: 1vw;
    border-style: solid;
    border-width: 1px;
    border-color: #9F9F9F;
    padding: 3% 3% 3% 3%;
    box-sizing: border-box;
}

Answer 1

<style>
.type{
    width: 30%;
    height: 100%;
    float: left;
    
    box-sizing: border-box;
}

.type > div {
    width: 48%;height: 100%;
    }
.type > div:first-child {
    float: left;
}
.type > div:last-child {
    float: right;
}
.type > div > div {
    margin-bottom: 10px;
    height: calc(33.33% - 7px);


}
.type li{
    border-style:solid;
    border-width:1px;
    border-color:#bd1a2d;
    height: 100%;
}
.type li.show {
    background: #f5d389;
    font-weight:bold;
    color: #bd1a2d;
}
.school{
    width: 69%;
    height: 100%;
    float: right;
    box-sizing: border-box;
}
.list{
    height: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #9F9F9F;
    padding: 3% 3% 3% 3%;
    box-sizing: border-box;
}
</style>
<div class="type">
                    <div >
                                <div >
                                    <li align="center" value="1">123</li>
                                </div>
                                <div >
                                    <li align="center" value="2">123</li>
                                </div>
                                <div >
                                    <li align="center" value="3">123</li>
                                </div>
                            </div>
                            <div>
                                <div >
                                    <li align="center" value="4">123</li>
                                </div>
                                <div >
                                    <li align="center" value="5">123</li>
                                </div>
                                <div >
                                    <li align="center" value="6">123</li>
                                </div>
                            </div>
                        </div>
                        <div class="school">
                            <div id="listOne" class="list"><p style="font-family: 隶书;color: #aaabab;font-size: 1.3vw;line-height: 5vw"></p></div>
                            
                        </div>

Answer 2

这个开发有点问题，至少需要个制式。比如最大宽度766px。不然会一直有问题。
布局的话，使用flex。

Answer 3

html

 <div class="type">
        <div style="float: left;width: 15%;height: 100%;margin-right:0.5%">
            <div style="height: 33.33%">
                <li align="center" value="1">123</li>
            </div>
            <div style="height: 33.33%">
                <li align="center" value="2">123</li>
            </div>
            <div style="height: 33.33%">
                <li align="center" value="3">123</li>
            </div>
        </div>
        <div style="float: left;width: 15%;height: 100%;">
            <div style="height: 33.33%">
                <li align="center" value="4">123</li>
            </div>
            <div style="height: 33.33%">
                <li align="center" value="5">123</li>
            </div>
            <div style="height: 33.33%">
                <li align="center" value="6">123</li>
            </div>
        </div>
        <div class="school">
            <div id="listOne" class="list">
                <p style="font-family: 隶书;color: #aaabab;font-size: 1.3vw;line-height: 5vw"></p>
            </div>
    
        </div>
        
    </div>

css

.type {
            width: 100%;
            height: 100%;
            float: left;
            box-sizing: border-box;
            position: relative;
        }

        .type li {
            cursor: pointer;
            /*margin-bottom: 9%;*/
            border-style: solid;
            border-width: 1px;
            border-color: #bd1a2d;
            /*border-radius: 5px;*/
            padding: 8%;
            color: #bd1a2d;
            /*font-weight:bold;*/
            font-size: 1vw;
        }

        .type li.show {
            background: #f5d389;
            font-weight: bold;
            color: #bd1a2d;
        }

        .school {
            width: 69%;
            height: 100%;
            float: right;
            box-sizing: border-box;
            position: absolute;
            right: 0;
        }

        .list {
            height: 100%;
            font-size: 0.9vw;
            display: block;
            line-height: 1vw;
            border-style: solid;
            border-width: 1px;
            border-color: #9F9F9F;
            padding: 3% 3% 3% 3%;
            box-sizing: border-box;
        }