如何将两个元素相邻放置，而不考虑页面大小

Question

我正试着在我的网页上做一个iphone风格的快速的东西。我的想法是，在我的侧边栏中，如果我点击一个链接，它会在侧边栏的左侧显示该链接的位置。为此，我同时创建了两个侧边栏，一个是可见的侧边栏，另一个是隐藏在另一个元素后面的侧边栏。

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

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

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

在你的条形图周围放一个包围栏，给它一个固定的宽度或最小宽度。然后，您只需查看您的侧边栏是否适合放在一个相邻的包装容器中。这保证了即使当窗口较小并且您可以水平滚动时，它们也会紧邻在一起。