CSS实现行内和上下自适应的几种方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS实现⾏内和上下⾃适应的⼏种⽅法
在写⼀个移动端⽹页，发现⽹页的头部搜索框两边各有固定宽度的按钮，搜索框可以根据宽度的变化来改变⾃⼰的宽度，达到填充的⽬的，也就是⼀种⾃适应吧，下⾯写写⾃⼰尝试的⼏种⽅法
⼀利⽤css3 的width：calc（100% - npx）；
<body>
<div style="border: 1px solid black;width: 100%;height: 100px">
<div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div>
<div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div>
</div>
</body>
注意 width:calc(100% - 120px); 两边都有空格，不要问我为什么会知道。
⼆利⽤display:table和display:table-cell；
<body>
<div class="box" style="border: 1px solid black;width: 100%;height: 100px;display: table">
<li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li>
<li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li>
</div>
</body>
display:table 这个属性很少⽤，display:table-cell可以⾃适应宽度，这点倒是挺好的。
三利⽤position:absolute；
<body>
<div style="height: 100px;width: 100%;border: 1px solid red">
<span style="display: block;float: left;height: 100px;width: 100px;background: green"></span>
<span style="display: block;float: left;height: 100px;position: absolute;left: 100px;right: 100px;background: yellow"></span>
<span style="display: block;float:right;height: 100px;width: 100px;"></span>
</div>
</body>
利⽤position:absolute；不固定宽度，设置⾼度，然后将左右定位为预留的位置，然后就会⾃适应屏幕宽度了。
四关于上下⾃适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<div style="position: absolute;top: 0;bottom: 0;width: 100%;border: 1px solid black">
<div class="header" style="height: 100px;background: red"></div>
<div class="mid" style="height:calc(100% - 200px);background: yellow"></div>
<div class="footer" style="height: 100px;background: green"></div>
</div>
</body>
</html>
这个就是利⽤position:absolute；上下都定位到边上，就会⾃适应了。