HTML练习代码—1
1.三列布局，左右两栏宽度 100px ，中间栏随屏幕宽度自适应
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>三列布局</title>
<!--
实现如下图的三列布局，其中左右两栏固定宽度 100px ，中间一栏宽度随屏幕宽度自适应，请完成所需的 HTML 和 CSS
-->
<style type="text/css" >
#container
{
height: 700px;
width:100%;
margin:0px;
overflow: hidden;
}
#left
{
height: 100%;
width:100px;
float: left;
background-color: deepskyblue;
}
#center
{
height: 100%;
width: calc(100% - 200px);
background-color: red;
text-align: center;
float:left;
}
#right
{
height:100%;
width:100px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
测边框100px
</div>
<div id="center">
<h1>主内宽度自适应</h1>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
</div>
<div id="right">
右边栏宽度100px
</div>
</div>
</body>
</html>
注意点：
calc（）函数用于长度计算，运算符前后 记得留空！！
overflow是一个处理元素溢出的
查看15道真题和解析
投递美团等公司10个岗位
