Question

我想在一行上获得三列。它一直有效，直到我为div添加了一些填充。我使用百分比使它有点反应。以下是CSS：

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

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

Here is my fiddle

我是否犯了百分比错误？

Answer 1

减少列的宽度。随着所有百分比和额外空间的增加，这一切都增加了100％以上，这就是为什么第三列将始终在下一行。而不是31％，尝试30％。

Answer 2

<强> Demo HERE 使用保证金权利：.5％;

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

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

使用

<div class="column last">

不是<div class="column" class="last">它是故事。

Answer 3

将width的{{1}}减少到30％。

它目前进入下一行，因为有3个方框.column 31％（总共93％）。他们有width（右和左）1％（总计高达6％），你有padding 1％（总计3％），总共超过100％。

margin-right

如何在同一行上获得3列？

3 个答案: