具有固定顶部位置

浮动的div我有一个HTML“栏的”含有数水平布置的小部件。每个项目由源文档中的div表示：具有固定顶部位置

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

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

换句话说，我想是这样position: fixed但只为纵坐标。水平地，他们应该一个接一个地排列。有没有办法用CSS做到这一点？

更新下面是我使用的HTML实。带有class="row"的divs s应该在工具栏中显示为小部件，并以水平方式排列在单行中。

<div class="row" id="titleRow"> 
    <span class="item"> <img src="../images/logo.png" height="26" /> </span> 
    <span class="item" id="title">Title</span> 
    <span class="item" id="close" onclick="window.close();"> close </span> 
</div> 

<div class="row" id="menuRow"> 
    <span class="item"> <ul id="menu"></ul> </span> 
</div> 

<div class="row" id="searchRow"> 
</div> 

<div class="row" id="pageRow"> 
    <span class="item" id="page-related-data"> Page-related data: </span> 
</div>

来源

2012-04-27 Matthew Gertner

可以为您提供一些更多的标记和CSS，所以我可以仔细看看。谢谢。 – frontendzzzguy 2012-04-27 10:23:25

试一下＃widget1 {position：absolute;左：50％;保证金左：-450px;顶部：0px;} – 2012-04-27 10:42:08

而不是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。

来源

2012-04-27 10:40:47

完美，谢谢！我曾经尝试过大部分，但缺少'whitespace：no-wrap'。 – 2012-04-27 13:40:58

具有固定顶部位置

回答

相关问题