Question

我正试图在我的网页上做一个iphone风格的swipey事情。我的想法是，在我的侧边栏中，如果我点击一个链接，它会将侧边栏放在左边，以显示该链接的去向。为此，我将并排创建两个侧边栏，可见侧边栏和将隐藏在另一个元素后面的下一个侧边栏。

找到侧边栏的示例

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

Answer 1

将侧边栏放在一个white-space: nowrap的容器中，然后将它们设为display: inline-block而不是浮动它们，它应该按照您的说明运行。

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

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

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

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

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

有关详细信息，请参阅this question和this article。

Sample |代码

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>

Answer 2

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

无论页面大小如何，如何将两个元素彼此相邻放置

2 个答案:

Sample |代码