Question

好的..我必须为一个类构建一个css布局。无论如何，首先，这是代码：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div class="container">


        <div class="vrstica ena">
            <div class="vsebina ena"></div>
        </div>


        <div class="vrstica dve">
            <div class="vsebina ena"></div>
            <div class="vsebina dve"></div>
        </div>


    </div>
</body>
</html>

stylesheet.css中

.container {
    width: 950px;
    margin: 0 auto;
    margin-top: 50px;
}

/* Splosni stili */
.vsebina {
    border: 1px solid black;
    background: #FAC6C6;
}


/* Prva vrstica */
.vrstica.ena .vsebina.ena {
    height: 160px;
}

/* Druga vrstica */
.vrstica.dve {
    margin-top: 40px;
}

.vrstica.dve .vsebina.ena {
    float:left;
    height: 160px;
    width: 450px;
}

.vrstica.dve .vsebina.dve {
    float: right;
    height: 160px;
    width: 450px;
    padding: 7px;
    border: 1px solid black;
    box-sizing: border-box;
}

从这个截图中可以看出，第二行的第二列项目中缺少2px：http://i.imgur.com/TLdQJzy.png

一旦我删除了box-sizing属性，它们的高度再次相同。

编辑：问题：为什么带有课程的盒子＆＃34; vsebina dve＆＃34;当我添加盒子大小时，2px比＆＃34; vsebina ena＆＃34;更短？

CSS布局 - 2px缺少？

0 个答案: