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

Question

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

可以在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.;)

有关详细信息,请参阅此问题和本文.

样品 | 码

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>