1

私はできる限り自分の状況を説明しようとします。

内部に情報を含む DIV ブロックのリストを表示するサイトがあります。width:33% を使用して 3 つの DIV ブロックが作成されます

その div ブロック内に、前の div ブロックとまったく同じ別の非表示の div ブロックが必要です。

だから私はこのようなものを持っています....

<div class="columnParent">
      <div class="columnChild">
            "Various stuff here that overlaps parent DIV"
      </div>

      "Various text that initially appears, but disappears after clicking a button"
</div>

これがCSSです...

.columnParent { width:31%; float: left; margin-right:15px; margin-bottom:4%; }
.columnChild { width:31%; float: left; margin-right:15px; margin-bottom:4%; visibility:hidden; position: absolute;
background: #FFF;}

子 DIV が表示されると、親よりも大きくなります。これは、 width:31% が HTML ページ全体の 31% を占めているのに対し、親 div はその親 div の 31% を占めているためです (ここには記載されていません)。

子 DIV を親と同じ幅にする方法はありますか?

子 div を親 div の正確なレプリカにしたい。内部のテキストを変更しますが、実際の div は同じサイズで、まったく同じ位置にある必要があります。

目的: 子 div を表示して親を非表示にし、異なる情報を持つ新しい子 div を表示するボタンがあります。子 div 内には、(JS を使用して) その div を再び非表示にするための戻るボタンがあります。

どんな助けでも大歓迎です!!! ありがとう！

4

2 に答える 2

0

子要素を置くとwidth: 100%;、親要素の正確な幅になります。その後、jQueryを含めて子要素をfadeIn/fadeOutし、JavaScriptコードで必要に応じて操作できます。

于 2013-08-10T20:51:53.857 に答える