0

私の場合は以下の通りです。2 つの子 div を持つ div があります。「イベント」div の幅と高さを 300px にしたいと思います。最初の要件は、'content' 要素と 'bar' 要素が親の幅の 100% を使用する場合、'event' div のサイズを維持することです。第二に、今のところ、'content' 要素の境界線は表示されません。ハードコードされた値を使用せずにすべてを内部に収め、最新のブラウザー (FF、Chrome、Opera、IE7+) のほとんどでこの表示を適切に取得することは可能ですか?

これは私が達成したいことです (100% の高さを取り、イベント要素の周りの灰色の境界線と衝突しない左の赤いバーに注意してください):

ここに画像の説明を入力

そして、これが私が持っているものです。HTML :

ここに画像の説明を入力

<div id="wrapper">
    <div id="scheduler">
        <div class="event" style="top: 30px; height: 300px; width: 300px">
            <div class="bar"></div>
            <div class="content">
                <div class="inner-content">Some text</div>
            </div>
        </div>
    </div>
</div>

、css :

#wrapper {
    width: 600px;
    height: 600px;
}
#scheduler {
    background-color: #E1FFFE;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0 10px;
    position: relative;
}
#scheduler .event {
    display: block;
    float: left;
    position: relative;
    width:100%;
    overflow:hidden;
}
#scheduler .event .bar {
    background-color: red;
    display: inline;
    float: left;
    height: 100%;
    position: relative;
    width: 5px;
}
#scheduler .event .content {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-left: none;
    display: inline;
    float: left;
    height: 100%;
    position: absolute;
    width: 100%;
}

および実行可能なデモ:

http://jsfiddle.net/6nTvD/1/

4

2 に答える 2

1

これを試して。bardiv を取り出し、.contentcss を次のように変更します。

#scheduler .event .content {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-left: 5px solid red; // replaces the bar
    display: inline;
    float: left;
    height: 99%; // a bit of a hack to fit the border in
    position: relative;
    width: 98%; // hack
}

http://jsfiddle.net/Dp3yz/

.bar編集：まだ所定の位置にあるコード：

#scheduler .event .bar {
    background-color: red;
    display: inline;
    float: left;
    height: 99.9%; /* Small offset at bottom */
    position: relative;
    width: 5px;
}
#scheduler .event .content {
    background-color: white;

    /* revised border */
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;

    display: inline;
    float: left;
    height: 99%;
    position: absolute;
    width: 98%;
}

新しいバージョン: http://jsfiddle.net/JJrC9/1/

于 2013-03-05T18:46:30.260 に答える
0

overflow:hidden;私はあなたの困惑を完全に理解している#scheduler .eventとは思いませんが、あなたの望む結果とあなたの現在の仕事との間で私がスパイできる唯一の違いは、境界線の存在ですoverflow:visible;.望ましい効果。

于 2013-03-05T18:43:05.650 に答える