html - 一道简单CSS的面试题
本文介绍了html - 一道简单CSS的面试题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
今天刚刚碰到的 hr要求一个半小时完成
要求DIV自适应大小
边距都是30px,剩下的DIV全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好
要求已经写在图上了 有没有萌新前来练手
解决方案
<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>
这篇关于html - 一道简单CSS的面试题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文