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>为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: 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

Answer 2

尝试将麻烦的列上的box-sizing属性设置为border-box，如下所示：

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;
}

如果col-2为16％，col-8为66％，则会尝试将col-6内的区块宽度设置为16％x 66％= 11.1％整个父母的宽度。因此，div内col-8的宽度将与外部{{1}}的宽度不同。

以下是工作示例的链接：http://jsfiddle.net/5jgkpscw/3/

HTML：Box模型和对齐方式

3 个答案: