HTML:盒子模型和对齐

Question

我正在尝试学习 HTML 和 CSS，但我对如何达到我想要的结果有点困惑。我创建了 div，允许我将页面分成 6 列。我正在尝试制作一个中间部分，该部分将包含四部分内容，并且在四部分周围有一个边框，而整个页面将分为 6 列。这是我的结构大纲:

<div class = "myRow">
<div class = "col-2">
</div>
<div class = "col-8">
    <div class = "col-2">
        content
    </div>
    <div class = "col-2">
        content
    </div>
    <div class = "col-2">
        content
    </div>
    <div class = "col-2">
        content
    </div>
</div>
<div class = "col-2>
</div>
</div?

col-2 的宽度设置为 16.66%，col-8 的宽度设置为 66.66%。 col-8 内的 div 是内联的并且居中。在我看来，col-8 div 内的框应该占据整个 col-8。但是，右边有很多额外的空间。我认为这是因为 col-8 内的 div 的百分比指的是 col-8 的大小，所以我将内部的 col-2 切换为 col-3 (25%)。但是，现在它们占用了太多空间并且环绕。这是填充/边距/边框未包含在宽度中的问题还是其他问题？我该如何解决？

CSS:

div.myRow
{
width: 100%;
display: flex;
flex-wrap: wrap;
}

div.col-1
{
width: 8.33%;
}
div.col-2
{
width: 16.66%;
}
div.col-3
{
width: 25%;
}
div.col-4
{
width: 33.33%;
}
div.col-5
{
width: 41.66%;
}
div.col-6
{
width: 50%;
}
div.col-7
{
width: 58.33%;
}
div.col-8
{
width: 66.66%;
}
div.col-9
{
width: 75%%;
}
div.col-10
{
width: 83.33%;
}
div.col-11
{
width: 91.66%;
}
div.col-12
{
width: 100%;
}

*{
-webkit-box-sizing: border-box;
-moz box-sizing: border-box;
box-sizing: border-box;
}

Answer 1

<div>你没有占用 col-8 的空间因为它们的宽度为 16.66%。

CSS 百分比

CSS 中的百分比是元素相对于其容器的计算。所以你的 col-2 <div> s 是 col-8 的 16.66% x 4 = 66.64%的宽度。

您还应该注意，您的第一个 col-2你拥有的不在col-8内所以它将占据 ITS 容器的 16.66%，这是完全不同的宽度。这意味着改变你的 col-2宽度为 25% 适用于 <div>里面col-8但对于 col-8 之外的最左边的列它将占据屏幕的 25%，因此会破坏您的整个结构。

float

元素之间还有一些微妙的间距，除非您处理它或将元素 float 到左侧，因此您也需要修复它。

float: left;

修复

按如下方式更改 col-2 属性会得到一个 col-2恰好占其父元素 25% 的元素。

div.col-2
{
    width: 25%;
    float:left;
}

这意味着我们要重命名或更改第一个 col-2因为我们不希望最左边的列占据页面的 25%:

<div class="myRow">
<!-- Change this col-2 to something else. col-2 now takes up 25% of its container -->
    <div align="center" class="co-1">
    </div>
    <div class="col-8" style = "border-style: solid; border-color: black">
...

还有一个工作 JSFiddle如果有帮助