logo标签列表

如何防止 div 元素被拉伸。

csshtml
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>
标签的大小只与其内部图像的大小相匹配。每次图像的大小可能都不同，因此
标签的宽度不能被硬编码。

问题是，标题文本会拉伸我的

标签，导致
标签比图像宽。如何防止这种情况发生？

2
由于您正在使用内联样式，因此可以使用服务器端语言（如PHP）或JavaScript（jQuery）来计算图像大小并相应地设置div的宽度/高度。 - giorgio
跨度元素可以从父级 div 继承其宽度吗？ - kurdt
1个回答
0
你喜欢JS技巧吗？如果是的话，你可以尝试像这样做。
在<head>标签中定义一个JS变量。这个变量用于保存你的div最终的宽度。
<head>
  <script>
    var divWidth;
  </script>
</head>

现在添加以下部分。请注意，“myDiv”是您的
标签的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>

你在这里做的是在 span 渲染之前获取 div 的宽度，然后在 span 渲染后将该宽度设置为 div 的宽度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接