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；上下都定位到边上，就会自适应了。。




posted @ 2016-10-28 14:47  weigram  阅读(2175)  评论(1)  编辑  收藏  举报