0

HTML5でライトボックス構造を作りたいです。

これが私のコードです：

<p>
   <a href="images/1.jpg" class="lightbox">
      <img src="images/1.jpg" style="width: 320px; height: 200px" alt="" />
      <div class="zoom">Zoom.</div>
      test test
   </a>
   Paragraph text.        
</p>

現在、「ズーム」div と「テスト テスト」テキストは「ライトボックス」と呼ばれるリンクの子である必要がありますが、ブラウザは上記のコードを 3 つの個別のリンクとしてレンダリングします (どのように可能でしょうか?):

<p>
   <a href="images/1.jpg" class="lightbox">
      <img src="images/1.jpg" style="width: 320px; height: 200px" alt=""/>
   </a>
</p>
<div class="zoom">
   <a href="images/1.jpg" class="lightbox">Zoom.</a>
</div>
<a href="images/1.jpg" class="lightbox"> test test </a>
   Text 
<p/>

jsfiddle は次のとおりです。

http://jsfiddle.net/amMMV/1/

タグに問題があることは 100% 確信していますが、何も見つかりません。

4

1 に答える 1

1

がブロック レベルの要素になるようにスタイル設定されていない限り、<div>を の子にすることはできません。<a><a>

それにもかかわらず、タグ<div>内にブロックレベルの要素 ( など) を含めることは決して有効ではありません。<p>

于 2012-07-01T16:33:03.203 に答える