Question

为什么以下CSS代码在蓝色（中间）元素的末尾和最后一个（右）元素之间创建空白？

    <!DOCTYPE html>
    <html lang="sv">
    <head>
    <meta charset="utf-8" />
    <title>A test page</title>
    <style type="text/css">
    body {
        margin: auto;
    }
    .tte {
        width: 20%;
        height: 50%;
        background-color: green;
    }
    .as {
        width: 60%;
        height: 50%;
        background-color: blue;
    }
    .ground {
        position: absolute;
        top: 0;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .middle {
        left: 20%;
    }
    </style>
    </head>
    <body>
    <div class="tte ground left"></div>
    <div class="tte ground right"></div>
    <div class="as ground middle"></div>
    </body>
    </html>

我希望代码创建两个绿色块元素，每个元素的宽度为20％，高度为50％，分别在左上角和右上角对齐，蓝色块元素在中间对齐，宽度为60 ％和相同的高度。但是蓝色元素的末端和最后一个（右）绿色元素的开头之间有明显的空白区域。为什么呢？

在Mavericks上使用Safari 7.0.1

Answer 1

编辑：您是否尝试使用display：table-cell？像这样？ http://jsfiddle.net/RGZZL/1/

.wrapper {
    display:table;
    height:300px;
    width:100%;
}

.left, .right {
    display:table-cell;
    width:20%;
    background:green;
}
.middle {
    display:table-cell;
    width:60%;
    background:blue;
}

-

我没有看到你正在谈论的问题，但试试这个。在div周围放一个包装器，并在那个上设置font-size和line-height为零。然后重置里面三个div的font-size和line-height。我发现有时代码中的空格会让浏览器认为你在那里有一个空格字符，这会增加空格。

元素之间不需要的空白区域

1 个答案: