html - 一道简单CSS的面试题

挺简单的,只是自适应不是响应式,都标着百分比了

图已经写得很详细了，只要根据图写出相应的布局就OK了。如果还是迷茫的，建议你从巩固一下p布局。

这个问题不难啊，我会，分分钟搞定

有2种方法实现一种是float，一种是flex，不过可能flex的兼容性不太好
float布局

flex布局

<style type="text/css">
<!--
            html,body {
                height: 100%;
            }
            body,
            body * {
                margin: 0;
                padding: 0;
            }
            p {
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                border: 1px solid #333;
            }
            .header_left,
            .header_right {
                height: 40%;
                float: left;
                margin-top: 10%;
            }
            .header_left {
                width: 40%;
            }
            .header_right {
                width: 60%;
                border-left-style: none; 
            }
            .clear {
                clear: both;
                border: none;
            }
            .main {
                margin-top: 5%;
                height: 45%;
                color: red;
                text-align: center;
            }
            .main_left,
            .main_right {
                float: left;
                width: 60%;
                height: 100%;
                border: none;
            }
            .main_right {
                width: 40%;
                border-left: 1px solid #333;
            }
        .main_left_top,
        .main_left_middle,
        .main_left_bottom,
        .main_right_top,
        .main_right_bottom {
         margin: 30px;
        }
-->
        </style>
    <p class="header_left"></p><p class="header_right"></p><p class="clear"></p>
    <p class="main"><p class="main_left">
        <p class="main_left_top">随着内容适应大小</p>
        <p class="main_left_top">随着内容适应大小</p>
        <p class="main_left_bottom">随着内容适应大小</p>
    </p><p class="main_right">
        <p class="main_right_top">随着内容适应大小</p>
        <p class="main_right_bottom">随着内容适应大小</p>
        </p>
        <p class="clear"></p>
    </p>