3

要素の左側と右側を、、overflow:hidden上部と下部をとして持つことはできませんoverflow-visibleか？

どちらかのオーバーフロープロパティに追加hiddenすると、両方とも外部コンテナから切り離されます。

私はこれを試していますが、運がありません：http: //jsfiddle.net/dmGXY/

<div id="outer" style="overflow-x:hidden;overflow-y:visible;">
    <div id="left"></div>
    <div id="top"></div>
</div>
<style>
#left,#top {
    position:absolute;
    border:solid black 2px;
    width:100px;
    height:100px;
}
#left {
    margin-left:-30px;
}
#top {
    margin-left:100px;
    margin-top:-30px;
}
#outer {
    position:absolute;
    top:70px;
    left:100px;
    width:300px;
    height:200px;
    border:solid 2px red;
}
</style>
4

1 に答える 1

1

一方を非表示にしてもう一方を表示することはできませんが、同じ効果を実現するために別のコンテナを「マスク」として使用できます

<div id="outer">
    <div id="inner">
        <div id="left"></div>
        <div id="top"></div>
    </div>
</div>

#left,#top {
    position:absolute;
    border:solid black 2px;
    width:100px;
    height:100px;
}
#left {
    margin-left:-30px;
}
#top {
    margin-left:100px;
    margin-top:-30px;
}
#inner {
    position:absolute;
    top:70px;
    left:0;
    width:300px;
    height:200px;
    border:solid 2px red;
}
#outer {
    position:absolute;
    top:0;
    left:100px;
    width:304px;
    height:100%;
    border:solid 2px green;
    overflow: hidden;
}

ここで出力を見ることができます：http： //jsfiddle.net/LB2bg/

于 2013-02-20T14:29:51.737 に答える