HTML CSS設計：尺寸不斷增大的div

按照另一個問題給出的一些說明，我重寫了一個用於打印PDF並在網上顯示的網頁。下面是一些代碼：HTML CSS設計：尺寸不斷增大的div

/** CSS File **/ 
body { 
    background-color: lightcyan; 
    border: 1px solid black; 
    font-family: sans-serif; 
    height: 268mm; 
    margin-bottom: 13mm; 
    margin-left: 11mm; 
    margin-right: 12mm; 
    margin-top: 10mm; 
    width: 187mm; 
} 
img { 
    margin: 0mm; 
    padding: 0mm; 
    max-height: 100%; 
    max-width: 100%; 
} 
div.ClrOvFlw, div.Pedice { 
    clear: both; 
    overflow: auto; 
} 
div.Left, div.Left75 { 
    clear: left; 
    float: left; 
} 
div.Right, div.Right25 { 
    clear: right; 
    float: right; 
} 
div.Left75 { 
    background-color: yellow; 
    height: 20.74mm; 
    margin-right: 1mm; 
    padding: 0mm; 
    width: 129mm; 
} 
div.Right25 { 
    background-color: blue; 
    height: 20.74mm; 
    margin-left: 1mm; 
    padding: 0mm; 
    width: 51mm; 
} 

<!-- HTML --> 
<body> 
    <div class="ClrOvFlw"> 
     <div class="Left75"> 
      <img id="Logo" src="../Box Logo Testata/Logo.jpg" alt="Mark"> 
     </div> 
     <div class="Right25"> 
      <div id="Bandiera"> 
       <img id="BandieraImg" src="" alt="ITA"> 
      </div> 
      <div id="MadeInItaly"> 
       MADE IN ITALY 
      </div> 
     </div> 
    </div> 
</body>

正如你所看到的，我計算出在給定模板的尺寸。如果我不把srcs放在img標籤中，那麼一切都很好，但是當我將它們放在上面時，Right25 div在另一行上流動，因爲Left75 div變大了。這是一個link小提琴。

我錯過了什麼？

編輯這是您要求的圖片。

來源

2016-01-07 IssamTP

標誌圖像的大小是多少？ –

爲什麼你期望'.ClrOvFlw'有一個'129 + 1 + 1 + 51'mm'寬度'？ – Trix

@ stig-js 71.97x20.74mm（gimp）。 – IssamTP

問題不在於左側元素的大小正在增加，而是右側元素被從屏幕右側推入。爲什麼？因爲CSS正在爲滾動條騰出空間，並且您的寬度值都是固定長度。

它由overflow: auto CSS造成被應用到div.ClrOvFlw這裏：

div.ClrOvFlw, div.Pedice { 
clear: both; 
overflow: auto; 
}

出於某種原因，當你添加一個圖像到src，將CSS期待一個滾動條的要求 - 不能可以肯定的說，但我會想象它在應用div的約束之前與圖像的大小有關。如果圖像的分辨率足夠大 - 是否縮小以適合div內部 - 則需要看到溢出。您可以通過將自然較小的圖像作爲src來測試，如http://www.w3schools.com/tags/smiley.gif。請注意，這是您的來源時divs符合預期。

您的解決方案是從ClrOvFlw div中刪除overflow: auto，或者調整源圖像的大小以使其自然分辨率足夠小，以使其適合包含div的指定高度。

注意：固定長度的東西是一個問題，因爲容器無法響應縮小的空間 - 包含div的25％不再是51mm。你可以嘗試使用％寬度，如果這是一個選項 - 它也可以緩解這個問題，而不必重做你的圖像。

來源

2016-01-07 11:45:38

問題是溢出：自動。我無法調整圖像大小，因爲在最終版本中，我無法控制圖像或任何後續的圖像。我在網絡版中使用％，一切都很好。 – IssamTP

HTML CSS設計：尺寸不斷增大的div

回答

相關問題