如何防止格被拉伸

這裏是代碼如何防止格被拉伸

 <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比圖像更寬。如何預防它？

來源

2012-11-17 kurdt

因爲您使用的是內聯樣式，您可以使用服務器端語言（如php或javascript（jquery）來計算圖像大小並相應地設置div寬度/高度 – giorgio

可以跨元素從父div繼承它的寬度嗎？ – kurdt

你喜歡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-17 15:00:09 prageeth

如何防止格被拉伸

回答

相關問題