Question

这是代码

     <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比图像宽。怎么预防呢？

Answer 1

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

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

现在添加以下部分。请注意，“myDiv”是您div的ID。

<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的宽度渲染。

如何防止div被拉伸

1 个答案: