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 size 只是匹配其中图像的大小。图像大小每次都可以不同。所以 div 的宽度不能被硬编码。

问题是，标题文本拉伸了我的 div，所以 div 比图像更宽。如何预防？

4

1 回答 1

0

你喜欢 JS 技巧吗？如果是这样，您可以这样做。
在<head>标签内定义一个 JS 变量。这是为了保持你的最终宽度div。

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

现在添加以下部分。请注意，“myDiv”是您的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，然后将该宽度设置为渲染之后的div宽度span。

于 2012-11-17T15:00:09.560 回答