1

親の複数の側でオーバーフローする場合とオーバーフローしない場合がある単一の子DIVを持つDIVがあります。親の下端からオーバーフローする子の部分を非表示にできる必要がありますが、他のすべての側面ではオーバーフローを許可する必要があります。

説明に役立つグラフィックを次に示します。

ここに画像の説明を入力してください

私はclipCSSプロパティを見てきましたが、それを提出に打ち負かすことができませんでした。これは主に、パーセンテージを受け入れず、この子に静的な高さ/幅がないためです。さらに、親にカーソルを合わせると、子はアニメートし、ある位置から別の位置に移動します。物事を少しトリッキーにします。

提案？

注 私の目標は、スタイリングの目的で無関係なマークアップを追加しないことです。この特定のサイトは、大規模な学校の場合と同様に、セマンティックレベルで安定している必要があるため、これを実現するためにラッパーdivを追加することは理想的とは言えません。

4

1 に答える 1

2

もう1つの親divを使用できる場合は、次を使用して同様の結果を得ることができます。

CSS：

    #grandparent{
        overflow: hidden
    }
    #parent {
        background-color: #600;
        width: 200px;
        height: 200px;
        padding-top: 30px;
        text-align: center;
        margin: 0 auto;
        position: relative
    }
    #child {
        background-color: #090;
        width: 100%;
        height: 300px;
        margin: 0 auto;
        position: absolute;
        padding: 0 1.5em;
        margin-left: -1.5em;
    }

マークアップ：

    <div id="grandparent">
      <div id="parent">
         <div id="child">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum</div>
      </div>
    </div>
于 2012-10-14T03:56:02.633 に答える