css如何使标签自适应填满除去某些宽度后的整行？

题目可能有点表述不清楚。看图！

左侧 4个宽度固定，右侧搜索框想要实现屏幕变大变小时，自适应占满右侧全部位置，有没有css可以实现的？

js的话可以在拖动的时候计算宽度，然后减去左侧固定宽度，给右侧设置。

css

阅读 5.1k

5 个回答

陌路凡歌

✓ 已被采纳

兼容性好的话用flex布局，不好的话，左边用position: absolute;定上去，右边padding-left：4个固定宽度，box-sizing: border-box;width:100%;

  .box{
            height: 100px;
            position: relative;
        }
        .pox{
            width: 300px;
            top:0;
            left:0;
            background: red;
            height: 100%;
            position: absolute;
        }
        .aaa{
            padding-left: 300px;
            box-sizing: border-box;
            background: blue;
            height: 100%;
        }

 <div class="box">
        <div class="pox"></div>
        <div class="aaa">11111111</div>
    </div>

萌萌

361713

发布于
2017-12-05

flex布局

Bestime

4.8k2638

发布于
2017-12-05

前面的左浮动。需要自适应（也就是最右边的那个）不浮动，加overflow:hidden;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        body{margin:0;padding:0;}
        .box{overflow:hidden;}
        .box .fl,.box .right{height:100px;background:#dd4215;}
        .box .fl{float:left;width:100px;margin:0 20px;}
        .box .right{overflow:hidden;background:#000;}
    </style>
</head>

<body>
    <div class="box">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="right"></div>
    </div>
</body>
</html>

coolooks

60149

发布于
2017-12-05

更新于
2017-12-05

可以在使用css里使用 calc(),例如：

.left{
    width:100px;
}
.middle{
    width:200px;
}
.right{
    width:-webkit-calc(100% - 100px - 200px);
    width:calc(100% - 100px - 200px);/*运算符两边一定要有空格*/
}

当然：他只支持现代浏览器，如果要兼容，还是用js的好