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

Question

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

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

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

Answer 1

将侧边栏放入具有 white-space: nowrap 的容器中并使它们 display: inline-block 而不是 float 它们，它应该按照您的说明工作.

---

请注意，某些浏览器中的 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>