親 Div が非表示になっているときに、子 Div を表示することはできますか?

非表示の親 Div 内に子 Div を表示する

親を非表示にしたまま子 Div を表示できますか?直観に反するように思えるかもしれませんが、このシナリオは実現可能です。

次の HTML コードを考えてみましょう。

<style>
  .Main-Div {
    display: none;
  }
</style>

<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div'">
    <a href="#"><img  src="/static/imghwm/default1.png" data-src="/image/pic.jpg" class="lazy" alt="親 Div が非表示になっているときに、子 Div を表示することはできますか?" ></a>
  </div>
  This is some Text..
  This is some Text..
</div>

デフォルトでは、'Main-Div' クラスは 'display: none; を使用して非表示になります。 ' CSSで。ただし、目標は、この非表示の親内の 'Inner-Div' クラスを表示することです。

これを達成するには、表示ではなく可視性を制御する必要があります。 CSS は次のように利用できます:

.parent>.child {
  visibility: visible;
}

.parent {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

ここでは、子 div の「visibility」スタイルが「visible」に設定され、親 div の「visibility」が「hidden」に設定されています。さらに、親 div の幅と高さは、その存在を最小限に抑えるためにゼロとして定義されます。これを行うと、子 div が非表示の親 div 内に表示されるようになります。

完全な例については、次の JSFiddle を参照してください: http://jsfiddle.net/pread13/h955D/153/.

以上が親 Div が非表示になっているときに、子 Div を表示することはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。