固定长度 DIV 与百分比长度 DIV 内联？答案

【问题标题】：Fixed length DIV inline with a percentage length DIV?固定长度 DIV 与百分比长度 DIV 内联？
【发布时间】：2015-01-12 15:48:36
【问题描述】：

对不起，这个模糊的标题，措辞这个问题很难。观察下面的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .float
            {
                float:left;
                display:inline-block;
                height:50px;
            }

            #a
            {
                width:80%;
                background-color:lightgrey;
            }

            #b
            {
                width:20%;
                background-color:lightblue;
            }
        </style>
    </head>
    <body>
        <div class="float" id="a">The width of this div should adjust depending on the screen size.</div>
        <div class="float" id="b">The width of this div should stay the same regardless of screen size.</div>
    </body>
</html>

当我运行此程序时，DIV“a”和“b”的宽度会根据屏幕大小而变化，正如您对百分比所期望的那样，但我想要 DIV "b" 保持固定宽度（如 50 像素），同时仍允许 DIV "a" 填充屏幕左侧和 DIV 左边缘之间的空间“b”。

有什么想法吗？

【问题讨论】：

标签： html css width percentage

【解决方案1】：

用纯js简单，用这个

<!DOCTYPE html>
<html>
<head>
<style>
        .float
        {
            float:left;
            display:inline-block;
            height:50px;
        }

        #a
        {
            background-color:lightgrey;
        }

        #b
        {
            background-color:lightblue;
        }
    </style>
</head>
<body>
        <div class="float" id="a">The width of this div should increase depending on the screen size.</div>
        <div class="float" id="b">The width of this div should stay the same depending on screen size.</div>
    <script type="text/javascript">
    width = window.innerWidth;
    height = window.innerHeight;
    console.log(width);
    console.log(height);
    var a= document.getElementById('a');
    var b= document.getElementById('b');
    aa=width-50-20;//20 is for browser default padding removal.
    console.log(aa);
    a.style.width=aa+"px";
    b.style.width=50+"px";
    </script>
</body>
</html>

希望这会有所帮助..

【讨论】：

@chipChocolate.py 也是更好的选择。

【解决方案2】：

好吧，旧版浏览器不支持calc，所以我认为您会更喜欢简单的floats。设置非常简单，如果您希望b 位于左侧，您只需更改float 和margin 方向即可。

这个例子的摆弄在这里：http://jsfiddle.net/ax6wo2qv/

.container {
    margin-right:50px;
}
#b {
    float:right;
    width:50px;
    margin-right:-50px;
}
#a {
    width:100%;
    float:left;
}

【讨论】：

【解决方案3】：

使用calc(100% - 50px):

Fiddle 上的演示

.float {
    float: left;
    display: inline-block;
    height: 50px;
}

#a {
    -webkit-width: calc(100% - 50px);
    width: calc(100% - 50px);
    background-color:lightgrey;
}

#b {
    width:50px;
    height: 100%;
    background-color:lightblue;
}

【讨论】：

【解决方案4】：

您可以使用带有display:table; 和display: table-cell; 的容器来执行此操作，此处为孩子们的示例

http://jsfiddle.net/cs0wor4y/

【讨论】：