3

ここにコードがあります

     <div style="display:inline-block; 
                 float:right; 
                 padding:0pt 6pt 4pt 6pt; 
                 margin-left:8pt; margin-top:2pt; margin-bottom:4pt; 
                 border-right:1px dotted black; 
                 border-left:1px dotted black;                 
                 background: url(http://zin.webd.pl/16mm/images/im-bg.png) no-repeat;">

                 <img src="http://zin.webd.pl/16mm/images/midsize/Battersea_Power_Station_-_geograph.org.uk_-_829933.jpg"/>
                 <br/>
                 <span class="caption">Battersea is an area of the London Borough of Wandsworth, England
                 </span>
        </div>

div サイズは、その中の画像のサイズとちょうど一致しています。画像サイズは毎回異なります。そのため、div の幅をハードコーディングすることはできません。

問題は、キャプション テキストが div を引き伸ばすため、div が画像よりも広くなることです。それを防ぐ方法は？

4

1 に答える 1

0

JS トリックが好きですか? もしそうなら、あなたはこのようなことができます。
タグ内で<head>JS 変数を定義します。これは、の最終的な幅を保持するためのものdivです。

<head>
  <script>
    var divWidth;
  </script>
</head>

次の部分を追加します。「myDiv」はあなたの id であることに注意してくださいdiv。

<body>
  <div style="display:inline-block;
             float:right; 
             padding:0pt 6pt 4pt 6pt; 
             margin-left:8pt; margin-top:2pt; margin-bottom:4pt; 
             border-right:1px dotted black; 
             border-left:1px dotted black;                 
             background: url(http://zin.webd.pl/16mm/images/im-bg.png) no-repeat;"
     id="myDiv">
   <img src="http://zin.webd.pl/16mm/images/midsize/Battersea_Power_Station_-_geograph.org.uk_-_829933.jpg"/>
   <br/>
   <script>
      divWidth = document.getElementById('myDiv').clientWidth;
   </script>
   <span class="caption">Battersea is an area of the London Borough of Wandsworth, England
   </span>
  </div>            
  <script>
    document.getElementById('myDiv').style.width = divWidth;
  </script>
</body>

ここで行ったことは、 がレンダリングされるdiv前の幅を取得し、その幅を がレンダリングされた後のspan幅として設定することです。divspan

于 2012-11-17T15:00:09.560 に答える