按照另一个问题中给出的一些说明，我重写了一个用于打印 pdf 并在网络上显示的网页。这是一些代码:
/** 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摆弄。
我错过了什么？
编辑
这是您要求的图像。
最佳答案
问题不在于左侧元素的大小增加，而是右侧元素从屏幕右侧被插入。为什么？因为 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。请注意，当这是您的来源时，div 符合预期。
您的解决方案是从 ClrOvFlw div 中删除 overflow: auto，或者调整源图像的大小，使其自然分辨率足够小以适应包含 div 的指定高度。
注意:固定长度的东西是一个问题，因为容器无法响应减少的空间 - 25% 的包含 div 不再是 51mm。如果这是一个选项，您可以尝试使用 % 宽度来代替 - 它也可以在无需重做图像的情况下缓解问题。
关于HTML CSS 设计 : div growing in size，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34652353/