HTML DIV設置，以限制內的div寬度

我具有以下設置HTML DIV設置，以限制內的div寬度

<div id="outerDiv" style="width:100%;"> 
    <div id="innerDiv"> 
    <center> 
     <a href="http:/..." title=".."> 
      <img src="http://...jpg" width="800" height="xxx" alt=".."> 
     </a> 
    </center> 
    </div> 
<div>

的outerDiv的寬度可以改變基於瀏覽器視圖端口上。有沒有一種方法可以通過使用style屬性限制innerDiv上的寬度，從而覆蓋包含的圖像寬度（本例中爲800）。目前，圖像跨越視口，我希望div /瀏覽器將圖像縮小到內部大小。

正在尋找類似：

<div id="outerDiv" style="width:100%;"> 
    <div id="innerDiv" style="attribute:xxx;" or something similar> 
    <center> 
     <a href="http:/..." title=".."> 
      <img src="http://...jpg" width="800" height="xxx" alt=".."> 
     </a> 
    </center> 
    </div> 
<div>

請注意：該innerDiv被渲染「變量」從數據例如存儲的參數來。我只能控制innerDiv的風格，以確保innerHtml上的'center'或'width'等內容不超出outerDiv的設置。我試圖在外部div上使用'max-width'，但這似乎並不奏效（我不是html/css的專家 - 所以我可以不正確地做到這一點）。

非常感謝您的幫助！

來源

2012-09-01 user1055761

不要再使用'

'標籤，它們已經過時了！相反，您可以使用一些CSS規則，例如'寬度：50％;保證金：0汽車;'。 – ComFreek

在這種情況下，無法控制innerDiv中顯示的內容。它正在渲染來自數據庫存儲的可變數據。我只能控制innerDiv的風格，而不能控制其中顯示的數據。 – user1055761

max-width屬性可以幫助你。

從img標籤卸下width屬性，並編寫額外的CSS代碼：

<style> 
#innerDiv { text-align: center; width: 800px; } 
#innerDiv a > img { display: inline-block; max-width: 100%; } 
</style>

來源

2012-09-01 14:33:55 dyurkavets

看起來像這是幫助我的情況。謝謝！ – user1055761

ComFreak有完整的答案。

刪除中心標籤，而是添加一些CSS。如果您只想定位該圖像的大小，則還要爲該圖像添加一個ID。

#innerDiv { 
     max-width:800px; 
     margin:0 auto;} 

    img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */ 
     width:100%; 
     height:0 auto;}

這應該照顧它。你可以將CSS放在標題中的樣式標籤中，或者更好地放在單獨的css文件中。

來源

2012-09-01 14:42:35

請勿使用中心標籤。它毫不猶豫地過時了。而是使用保證金：0 auto;這將以內容爲中心。使用innerDiv id的max-width屬性。這是一個很好的參考資料。 http://www.w3schools.com/cssref/pr_dim_max-width.asp

來源

2012-09-01 16:28:05 Nightgem

我已經用更多的信息更新了這個問題。但是，感謝Nightgem和ComFreek！（我沒有意識到'中心'標籤，也會試圖阻止它被添加到div的html/etc中）。 – user1055761

HTML DIV設置，以限制內的div寬度

回答

相關問題