Question

我试图在我的网页上做一个讲解语的风格。想法是,在我的旁边厅,如果我点击一个环节,就会把旁遮挡在左边,暴露这一联系会到哪里。为了做到这一点,我会同时制造两条旁障,即明显的旁边bar和下一个旁边bar,隐藏在另一个因素后面。

旁边关的一个例子见。 http://jsfiddle.net/gpcC6/7/。

The problem I m having, is when the window is resized, the second sidebar goes under the first. I want to to stay to the right, even if it means that it goes off the side of the screen. Is this possible? Thanks

Answer 1

在有<代码>white-space: nowrap的集装箱内规定副管,并使之成为<代码>的显示:有线24,而不是按您的指示浮动。

注:white-space: nowrap in some browsers will interpret thespace between two divs in the RUS as an actualspace

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

取消这种间隔,你需要将这些间隔放在同一线上。

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

或者,你可以向母体添加一个<代码>font:0;,在这种情况下,该集装箱也将消除间隔,但必须明确确定在你之前所有元素的体积,否则,所有儿童元素的体积也将达到0;]

见, 问题和。

Sample | Code

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;
}

传真

<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

围绕你的酒吧进行包装,给它固定的 w或min。然后,你只能看看一下,你的旁边关在相互毗邻的这个包装箱里。即便窗户较小,而且你能够横向发展,这些保障也相互保持。

Sample | Code

友情链接