html - 如何在同一行获得 3 列？

Question

我试图在一行上获得三列。它一直有效，直到我向 div 添加了一些填充。我正在使用百分比来使其具有响应性。下面是CSS：

.contentLine .column {
    float: left;
    margin: 0;
    width: 31%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}

.contentLine .last {
    margin-right: 0;
}

这是我的小提琴

我是不是把百分比弄错了？

Answer 1

减少列的宽度。加上所有的百分比和额外的空间，所有的加起来都超过 100%，这就是为什么第三列总是在下一行。尝试 30%，而不是 31%。

Answer 2

在这里演示 使用 margin-right:.5%;

.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: .5%;
padding: 1%;
position: inherit;
}

并像这样更改最后一列 div。因为您使用了两次类属性，而您只能在一个标记中使用一次类属性。

利用

<div class="column last">

不是<div class="column" class="last">它是磨损的。

Answer 3

减少width到.column30%。

它目前进入下一行，因为有 3 个盒子，width占 31%（总共 93%）。他们padding（左右）为 1%（因此总计高达 6%），而您拥有margin-right1%（总计为 3%），加起来超过 100%。

.contentLine .column {
    float: left;
    margin: 0;
    width: 30%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}