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?

其宽度设置为16.66%，而头-8的宽度为66.66%.里面的divs 8是内联和居中。在我的心目中，里面的盒子-8 div应该占全部的-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% x4= 66.64%。

您还应该注意到，您拥有的第一个col-2不在col-8中，因此它将占据其容器的16.66%，这是一个完全不同的宽度。这意味着将col-2宽度更改为<div>在col-8中工作的25%，但对于位于col-8之外的最左边的列，它将占用屏幕的25%，从而抛出整个结构。

浮动

元素之间也有一些细微的间隔，除非您处理了这些元素，或者浮动了剩下的元素，所以您也需要修复这个问题。

float: left;

Fix

按照下面的方式更改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如果它有帮助的话

Answer 2

尝试将麻烦列上的框大小属性设置为边框框，如下所示：

box-sizing: border-box;

这将包括任何边框的宽度或填充到您指定的宽度。此外，一定要清除任何可能继承的空白。

margin: 0;

Answer 3

也许这就是你要找的：

.col-2 {
    width:16%;
    text-align:center;
    display: inline-block;
}
.col-8 {
    display: inline;
}

.myRow {
    text-align:center;
}

当您将16%用于col-2，66%用于col-8时，它将尝试将col-6中块的宽度设置为16% x 66% = 11.1%。因此，div在col-8中的宽度将与外部的不同。

下面是指向一个工作示例的链接：http://jsfiddle.net/5jgkpscw/3/