2

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

情况

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

我的困境

页眉是页面顶部的一个 29 像素高的栏，两端都有 29x29 的按钮。在中间，与右侧按钮相邻的是一个 div（用于页面标题），我希望它的最小宽度为 300，但我也希望它随着浏览器宽度而扩展。

这里有一个问题：我希望这个标题 div 从左按钮上拉开，留下最大宽度为 200 像素的间隙。一旦达到间隙的最大宽度，我希望标题 div 开始扩展，保持按下右键。见下文。

IMG

注意：我在这里创建了一个 jsfiddle进行实验

4

2 回答 2

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>

So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.

需要指出的另一件事是，虽然 javascript 确实适用于导航正在增长，但它不适用于缩小。如果说用户决定缩小他的窗口大小，我没有实现一种能够缩小它的方法，因为我将它设置为将宽度锁定在 200 像素（我想解决这个问题的方法是使用} else { clientWidth = "100%"? 不当然。希望这能让你走上正确的轨道。

于 2012-08-22T10:33:08.177 回答
1

我已经修改了您的 JSFiddle并添加了一些 JavaScript 以获得我认为您正在寻找的效果。还有一些注释可以引导您准确了解 JS 代码试图完成的工作。

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

于 2012-08-22T14:03:15.323 回答