2

我正在制作一个简单的博客主题,我想要一个小框显示每个帖子的左偏移量的帖子日期,如下所示:http ://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png

但是,帖子的容器有一个溢出-y 设置为滚动,并且将时间戳 div 附加到每个帖子不会显示,因为它被溢出隐藏了。如果我将时间戳 div 设置为 position: absolute,我可以解决这个问题,但它不会与帖子保持一致,而是固定在一个地方。

这是一个简单的例子:http: //jsfiddle.net/MeVwt/

<style>
#leftCol{
    width: 100px;
    height: 500px;
    background: green;
    float: left;
}
#rightCol{
    width: 400px;
    height: 500px;
    background: orange;
    overflow-y: scroll;
    float: left;
}
.content{
    height: 700px;
    width: 100%;
    background: red;
}
.box{
    width: 100px;
    height: 100px;
    background: purple;
    margin-left: -50px;
}
</style>

<div id="leftCol">
</div>

<div id="rightCol">
    <div class="content">
        <div class="box"></div>
        Fish
    </div>

</div>

我想要做的是让紫色框(.box)显示在其容器(.content)之外并出现在绿色区域而不将其设置为固定位置,因此它仍会随内容滚动。

4

3 回答 3

3

如果将#leftCol与重叠#rightCol(通过将它们定位absoluteleft:0;其父容器的位置),请将左边距设置为左列的宽度,然后将.content位置设置为relative并将框位置设置为absolute,并使用 调整定位left

这是更新后的 CSS:

#leftCol{
    position:absolute;
    width: 100px;
    height: 500px;
    background: green;
    left:0;
}
#rightCol{
    position:absolute;
    padding-left:100px;
    width: 400px;
    height: 500px;
    overflow-y: scroll;
    left:0;
}
.content{
    height: 700px;
    width: 100%;
    background: red;
    position:relative;
}
.box{
    width: 100px;
    height: 100px;
    background: purple;
    position:absolute;
    left:-100px;
}

和一个DEMO

希望这会有所帮助=)

于 2013-05-16T21:10:54.810 回答
1

您可以围绕实际内容创建另一个 div,然后将其浮动到框旁边。像这个http://jsfiddle.net/MeVwt/3/这样 的缺点是您必须指定内容的宽度才能填充所有宽度。

<div id="rightCol">
    <div class="content">
        <div class="box"></div>
        <div class="content_text">
            Fish
        </div>
    </div>
</div>

CSS:

.content_text{
    height: 700px;
    background: red;
    width: 335px;
    float:left;
}
.box{
    width: 100px;
    height: 100px;
    background: purple;
    margin-left: -50px;
    float:left;
}
于 2013-05-16T21:13:20.450 回答
-1

html {溢出-x:隐藏;}

身体 { 溢出-x:隐藏;}

于 2014-06-24T22:35:25.670 回答