Question

我正在尝试创建一个简单的列系统。总计，一行中可以有12列，非常类似于引导程序。我的计算以.col-1占父div宽度的8％的方式进行。这样12列总计将达到96％。因此应该没有问题。但是，即使这样做，我的孩子div（列）也会溢出到下一行，这很奇怪。这是我的代码：

HTML

<html>
<body>
  <br /><br />
  <div class="container" style="border: 1px solid red;">
        <div class="columns" style="border: 1px solid blue;">
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>

            <div class="col-6 bordered"></div>
            <div class="col-6 bordered"></div>
        </div>
    </div>
</body>
</html>

CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.columns {
    width: 100%;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.columns [class^="col"] {
    display: inline-block;
    text-align: left;
    margin: 0;
    min-height: 1px; /* Minimum height set to 1px so that even empty columns 
    will take up width, removing the need for offsets. */
}
.col-1 {
    width: 8%;
}
.col-2 {
    width: 16%;
}
.col-3 {
    width: 24%;
}
.col-4 {
    width: 32%;
}
.col-5 {
    width: 40%;
}
.col-6 {
    width: 48%;
}
.col-7 {
    width: 56%;
}
.col-8 {
    width: 64%;
}
.col-9 {
    width: 72%;
}
.col-10 {
    width: 80%;
}
.col-11 {
    width: 88%;
}
.col-12 {
    width: 96%;
}
.bordered {
    border: 1px solid black;
    height: 20px;
}

您可以在此处查看结果：https://jsfiddle.net/L9txad4h/

如您所见，应该将12个.col-1元素排成一行，但其中一个溢出到底行。任何帮助表示赞赏。

Answer 1

尝试查看是否没有其他CSS会影响该类，例如默认样式。所有的专栏都只是其中的一部分？

为什么父div中的子div占用的宽度多于定义的宽度？

1 个答案: