情况

Question

我们有一个使用JavaScript的解决方案，但我也很好奇是否有办法用纯CSS做到这一点？

情况

我对响应式设计比较陌生，而且过去一直坚持使用定位等来实现我的布局。我正在尝试创建一个简单的响应式标头，以特定的方式调整大小。

我的困境

标题是页面顶部的29px高栏，两端各有29x29个按钮。在中间，与右边的按钮接壤，是一个div（对于页面标题），我想要最小宽度为300，但我也希望它随浏览器宽度扩展。

以下是捕获：我希望此标题div从左侧按钮拉出，留下 max-width 的间隙为200px。一旦达到间隙的最大宽度，我希望标题div开始扩展，保持按下右键。请参阅以下内容。

注意：我已经创建了一个jsfiddle here来进行实验

Answer 1

好的，这就是我到目前为止所拥有的。将在早上编辑（有点累）

我觉得这绝对可以，但确实需要javascript。您希望有200px可用空间的事实需要javascript或某种编程来告诉样式这样做。

 <!DOCTYPE html>
<html>
    <style>
        html, body { height: 100%; }
        #container { margin-top: 29px; }
        header { height:29px; margin: 0 49px; background-color:#999999; }

        #div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
        #div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
        #div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
        #div4 { height: 100%; background-color: yellow; display: inline-block;  float: right; }
    </style>
<body>
    <div id="container">
        <header>
            <div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
        </header>
    </div>
</body>
    <script>
        if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
            document.getElementById("div2").style.width = "200px";
        }
    </script>
</html>

所以我去做的方式不是有3个div，而是4个 - 你原来的3个，但是你想要考虑的白色空间，开放空间，我做了一个div作为好。我也有javascript，这样当窗口缩放超过200px的宽度时，它将锁定它的宽度。不幸的是，我的CSS并没有超级优秀，所以我仍然想找到一种方法来实现这一点。如果有人想编辑我的答案，请随意。

另一点需要指出的是，虽然javascript确实在导航器正在增长时起作用，但它并不适用于缩小。如果说用户决定缩小他的窗口大小，我没有实现它能够缩小的方法，因为我已将其设置为将宽度锁定为200px（我想一种方法可以使用{{ 1}}？不确定。希望这会让你走上正轨。

Answer 2

我modified your JSFiddle并添加了一些JavaScript以获得我认为您正在寻找的效果。还有一些注释可以指导您完成JS代码正在尝试完成的任务。

基本上，我将处理程序绑定到window.resize事件，计算标头中的可用空间，以及从标题容器中添加或减去以保持其宽度。

困惑：响应式标题通过纯HTML / CSS进行特殊调整？

情况

我的困境

2 个答案: