Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
263 views
in Technique[技术] by (71.8m points)

一道简单CSS的面试题

今天刚刚碰到的 hr要求一个半小时完成

要求DIV自适应大小

边距都是30px,剩下的DIV全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好

要求已经写在图上了 有没有萌新前来练手

图片描述


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<style type="text/css">
<!--
            html,body {
                height: 100%;
            }
            body,
            body * {
                margin: 0;
                padding: 0;
            }
            div {
                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>
    <div class="header_left"></div><div class="header_right"></div><div class="clear"></div>
    <div class="main"><div class="main_left">
        <div class="main_left_top">随着内容适应大小</div>
        <div class="main_left_top">随着内容适应大小</div>
        <div class="main_left_bottom">随着内容适应大小</div>
    </div><div class="main_right">
        <div class="main_right_top">随着内容适应大小</div>
        <div class="main_right_bottom">随着内容适应大小</div>
        </div>
        <div class="clear"></div>
    </div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...