Question

根据另一个问题给出的一些说明，我重写了一个用于打印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来摆弄。

我错过了什么？

修改这是您要求的图像。

Answer 1

问题不在于左侧元素的大小正在增加，而是右侧元素从屏幕右侧被推入。为什么？因为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符合预期。

您的解决方案是从overflow: auto div移除ClrOvFlw，或者调整源图像的大小，使其自然分辨率足够小，以使其适合包含div的指定高度。< / p>

注意：固定长度的东西是一个问题，因为容器无法响应缩小的空间 - 包含div的25％不再是51mm。您可以尝试使用％宽度，如果这是一个选项 - 它也可以缓解问题，而无需重做您的图像。

HTML CSS设计：div的规模越来越大

1 个答案: