Question

对于模糊的标题感到抱歉，这个问题难以措辞。请注意以下代码：

<!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'/强>”。

有什么想法吗？

Answer 1

使用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;
}

Answer 2

您可以使用display:table;和display: table-cell;的容器为子女执行此操作示例

http://jsfiddle.net/cs0wor4y/

Answer 3

使用纯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>

希望这会有所帮助..

Answer 4

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

示例位于此处：http://jsfiddle.net/ax6wo2qv/

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

固定长度DIV内联百分比长度DIV？

4 个答案:

Fiddle