2

私は単純なブログのテーマを作成しています。次のように、各投稿の左オフセットに投稿日を表示する小さなボックスが必要です: http://s21.postimg.org/fjygwqw1z/timestamp_Mockup.png

ただし、投稿のコンテナーには、スクロールするために設定されたオーバーフロー y があり、タイムスタンプ div を各投稿に添付しても、オーバーフローによって隠されているため表示されません。タイムスタンプ div を position: absolute に設定すると、これを回避できますが、投稿とインラインに留まらず、代わりに 1 か所に固定されたままになります。

簡単な例を次に示します: 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と重ねる場合は、左マージンを左列の幅に設定し、位置を に、ボックスの位置を に設定し、 を使用して位置を調整します。#rightColabsoluteleft:0;.contentrelativeabsoluteleft

更新された 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;
}

そしてデモ

これが役立つことを願っています=）

于 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 に答える