HTML div百分比-不准确

如果我有一个100px * 100px的div

我定义了10x子div，它们应该以10px x 10px的尺寸相邻。

为什么不呢?

用你的浏览器试试:http://dwaves.de/prozentuale-angaben-check.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Statisches Layout</title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
html,body {
   height: 100%;
   width: 100%;
}
.container {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 0px;
    top: 0px;
}
.relative {
    width: 10%;
    height: 10%;
    background: yellow;
    position: relative;
    float: left;
}
.fixed {
    height: 10px;
    width: 10px;
    background: blue;
    position: relative;
    float: left;
}
</style>
<body>
    <div class="container">
        <div class="relative">
        </div>
        <div class="relative">
        </div>
        <div class="relative">
        </div>
        <div class="relative">
        </div>
        <div class="relative">
        </div>
        <div class="relative">
        </div>
        <div class="fixed">
        </div>
        <div class="fixed">
        </div>
        <div class="fixed">
        </div>
        <div class="fixed">
        </div>
        <div class="fixed">
        </div>
        <div class="fixed">
        </div>
    </div>
</body>
</html>

在你发布的链接中，你有12个，而不是10个<div>元素。此外，您有一个不必要的<br/>标签。解决了这两个问题，它们就能排在一起了。

JSFiddle demo在这里(与<br>和最后两个<div>标签删除)

相关内容

最新更新

热门标签：