1

この HTML を考えてみましょう:

<body>
  <div id="parent">
    <div id="child">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus eget varius. Curabitur imperdiet sagittis leo, a mollis dui lobortis in. In ac facilisis tortor. Nam vitae pellentesque lorem, non commodo lacus.
    <div>
  </div>
</body>

ここでの目的は、親が で子をdiv隠そうとすることです。ただし、使用目的は、親の幅をアニメーション化/変更して、子のコンテンツを「明らかに」することです。明確にするために、この目的のためにアニメーション/変更コードは必要ありません。これらの元のルールを保持しながら、実行時にアニメーション化/変更できるように、HTML/CSS の強固な基盤が必要です。divoverflow:hiddendiv

  • 親は、画面のパーセンテージ幅でなければなりません (子を表示/非表示にするために幅をアニメーション化することを意図しています)。
  • 子も画面のパーセンテージ幅である必要があります。
  • 子は、その親に従ってコンテンツをラップしてはなりません。
  • 親は、与えられた幅で可能な限り子のみを表示する必要があります。
  • ピクセル単位の絶対幅はありません。
  • CSS3 なし。
  • JavaScript はありません。

例：

これが私が達成しようとしているものの例です:

目的

この例でdivは、子の親セクションのみdivを表示可能にする必要があります。ただし、子のコンテンツは折り返されるべきではなく、親と子の両方が画面のパーセンテージ幅である必要があります。

私が試したこと：

これまでのところ、私はこの CSS で試みました:

html, body{

  height:100%;

}

#parent{

  position:relative;

  width:15%;
  height:100%;

  overflow:hidden;

}

#child{

  position:absolute;

  width:200%;

}

上記の CSS の問題は、子がその親に従ってdiv常に調整しているため、子のコンテンツが完全に「アンラップ」されるまで、親のパーセンテージ幅を増やして子を「明らかに」することは事実上不可能です。widthdivdiv

あなたは尋ねるかもしれません:

  • position:relative子の幅が画面と一致するように、親から削除してみませんか?

絶対配置の子要素を非表示にするには、親の位置を に設定する必要があるためrelativeです。

  • static子要素またはを作成しないのはなぜrelativeですか?

子のコンテンツは親に従って折り返されるため、何も「隠す」ことができなくなります。

  • 子供が 200% になっているのはなぜですか?

そのため、(画面に対して) 30% の相対的な幅を持つことができます。親は 15% であるため、画面の 30% を埋めるには、子のパーセンテージ幅を親の 2 倍にする必要があります。

  • ピクセル単位の絶対幅を使用できますか?

いいえ。

  • CSS3は使えますか？

いいえ。

  • JavaScript を使用できますか?

いいえ。JavaScript を使用できれば、この質問をすることはなく、パブにいるでしょう。:-)

4

1 に答える 1

1

回避策を見つけようとして、次の可能性があります。

追加のラッパーが必要になります。

<div class="parent">
<div class="parent2">
<div class="child">
</div>
</div>
</div>

次に、このCSS

.parent {
    position: relative;
    height: 90%;
    width: 100%;
    left: -70%;
    border-right: 1px solid red;
    overflow: hidden;
}
  
.parent2 {
    position: absolute;
    width: 100%;
    height: 99%;
    left: 70%;
    border: 1px solid red;
    overflow: hidden;
}

.parent, .parent2 {
    -webkit-transition: all 2s;
}

.child {
    position: absolute;
    width: 50%;
    height: 80%;
    border: 2px solid green;
    background: url("http://placekitten.com/200/300");
    background-size: cover;
}

.parent:hover {
    left: -40%;
}

.parent:hover .parent2 {
    left: 40%;
}

「スライディング ウィンドウ」手法を実装します。親は実際には成長しません。2 人の親が位置を変えて、子供が多かれ少なかれ見えるようにします。

フィドル

トランジションは、ホバー時に既に実装されています。また、子供の幅の人為的な微積分を取り除きます。

于 2013-10-18T21:21:28.557 に答える