2

我正在尝试在我的网页上做一个 iphone 风格的滑动操作。这个想法是，在我的侧边栏中，如果我单击一个链接，它将侧边栏向左显示该链接的位置。为此，我正在并排创建两个侧边栏，可见侧边栏和下一个将隐藏在另一个元素后面的侧边栏。

可以在http://jsfiddle.net/gpcC6/7/找到侧边栏的示例

我遇到的问题是，当窗口调整大小时，第二个侧边栏位于第一个侧边栏下方。我想留在右边，即使这意味着它离开了屏幕的一侧。这可能吗？谢谢

4

2 回答 2

5

将侧边栏放在一个容器中，white-space: nowrap并制作它们display: inline-block而不是浮动它们，它应该按照您的说明工作。

请注意， white-space: nowrap在某些浏览器中，会将 HTML 中两个 div 之间的空间解释为实际空间

<div>
</div><!-- SPAAAAAACE -->
<div>
</div>

要删除该间距，您需要将它们放在同一行

<div>
</div><div>
</div>

或者，您可以将 a 添加font: 0;到父元素，在这种情况下，容器也会删除间距，但请注意，您需要在执行此操作之前明确定义所有元素的字体大小，否则所有子元素都将具有字体大小也为 0。;)

有关更多信息，请参阅此问题和本文。

样品| 代码

CSS

div{
    font-size: 16px;
}

#topbar {
    height: 40px;
    background-color: blue;
}

.wrapper{
    white-space: nowrap;
    font-size: 0;
}

.sidebar {
    width: 200px;
    display: inline-block;  
    white-space: normal;
}

.title {
    height:30px;
    background-color: red;
}

.main {
    height: auto;
    overflow: scroll;
}

HTML

<div id="topbar">
    hello
</div>
<div class='wrapper'>
    <div class="sidebar">
        <div class="title">
            title
        </div>
        <div class="main">
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </div>

    </div>
    <div class="sidebar">
        <div class="title">
            title
        </div>
        <div class="main">
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </div>      
    </div>
</div>
于 2012-04-11T12:24:47.007 回答
2

在你的酒吧周围放置一个包装 div 并给它一个固定的宽度或最小宽度。然后你必须只看你的侧边栏在这个包装容器中彼此相邻。即使窗口较小并且您可以水平滚动，这也可以保证它们彼此相邻。

于 2012-04-11T12:21:02.050 回答