Question

我有一个HTML“工具栏”，其中包含许多水平排列的小部件。每个项目都由源文档中的div表示：

<div id="widget1" />
<div id="widget2" />
<div id="widget3" />

我使用float: left定位div。问题是我还希望将它们固定在工具栏的顶部，以便在用户缩小窗口宽度时它们不会环绕。相反，我只是希望它们水平溢出（隐藏溢出），这样行为就像真正的工具栏一样。

换句话说，我想要position: fixed之类的东西，但仅限于垂直坐标。水平地，它们应该一个接一个地定位。有没有办法用CSS做到这一点？

更新以下是我正在使用的真实HTML。带有divs的{{1}}是应该在工具栏中显示为小部件的，水平排列在一行中。

class="row"

Answer 1

而不是float: left;尝试display: inline-block; vertical-align: top;。然后在父元素上设置white-space: nowrap;和overflow: hidden;。有关示例，请参阅http://jsfiddle.net/rt9sS/1/。

注意inline-block有一些问题。它是空白空间（因此HTML中的元素周围的空白区域将在文档中可见）。它在IE6 / 7中的支持也有限，尽管你可以通过给出元素布局来解决这个问题。 .oldie .widget { display:inline; zoom:1; }。有关详情，请参阅http://www.quirksmode.org/css/display.html#inlineblock。

Answer 2

我知道这是一个老问题，想为运行它的用户添加一个简单的jquery答案。

$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});

要在页面上显示更高或更低，只需将其添加到$（document）.scrollTop（）

为我工作

具有固定顶部位置的浮动div

2 个答案: