鍍金池/ 問答/HTML/ css如何使標簽自適應填滿除去某些寬度后的整行？

css如何使標簽自適應填滿除去某些寬度后的整行？

題目可能有點表述不清楚。 看圖！

clipboard.png

左側(cè) 4個寬度固定， 右側(cè)搜索框想要實現(xiàn) 屏幕變大變小時，自適應占滿右側(cè)全部位置， 有沒有css可以實現(xiàn)的？

js的話 可以在拖動的時候計算寬度，然后減去左側(cè)固定寬度，給右側(cè)設置。

回答
編輯回答
未命名

demo：https://jsfiddle.net/x7785186...

基本原理就是觸發(fā)BFC， 建議采用table-cell和長寬度, 避免overflow：hidden 遮擋模糊檢索彈出層的問題

2017年7月17日 01:17
編輯回答
終相守

flex布局

2017年11月12日 03:23
編輯回答
毀憶

兼容性好的話用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>
2017年2月1日 03:10
編輯回答
朕略傻

前面的左浮動。需要自適應（也就是最右邊的那個）不浮動，加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>
2017年9月14日 22:32
編輯回答
無標題

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

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

當然：他只支持現(xiàn)代瀏覽器，如果要兼容，還是用js的好

2017年4月2日 12:39