Question

我在尝试排列3列布局时遇到了一些困难。这是我目前的HTML和CSS布局

<div class="row">
    <div class="col">C1</div>
    <div class="col">C2</div>
    <div class="col">C3</div>
</div>

CSS如下：

.row {
   width: 964px;
}

.row:last-child {
   margin: 0;
}

.row .col {
  width: 33.33%
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
}

列的宽度基本相等，使用百分比33.33％。我遇到的问题是，当列显示在行容器中时，在最后一列上，右边距上有一个间隙。增加右边距会将最后一列推到下一行。

如何排列列以使它们保持相同的宽度，但是对于第一列和最后一列没有任何边距（即第一列没有左边距而第三列没有右边距） ....任何想法？

谢谢..

Answer 1

.row .col:last-child
{
    margin-right:0;
}

这样做。但是，不要忘记在'。row.col'样式

之后加入它

Answer 2

在此使用％代替 px margin-right: 10px;

.col{
    width: 32%;
    margin-right: 2%;
}

.col:last-child{
    margin-right: 0%;
}

Answer 3

你应该使用

.row{
display:table;
}
.col{
display:table-cell;
}

示例：

.row{ display:table; width:100%; } .col{ border:1px solid #000; display:table-cell; width:33%; }

FIDDLE DEMO

Answer 4

如果您的行是固定宽度（964px），那么您不能只计算所需的列宽并将边距作为左右两列放在第二列上吗？

此外，964不会除以三，所以这有点奇怪的选择 - 你总是会遇到舍入问题 - 我已将其改为963px，如下例所示。

e.g。

<div class="row">
    <div class="col">C1</div>
    <div class="col middle">C2</div>
    <div class="col">C3</div>
</div>

使用CSS：

.row .col {
  width: 321px;
  float: left;
  margin-bottom: 20px;
}

.row .middle {
    margin-left: 10px;
    margin-right: 10px;
}

Answer 5

感谢答案的人，我最终不得不更改我的主站点容器正在使用的填充量。一旦我的宽度达到了970px，我就从Bootstrap中借了一些css来正确显示布局。

最终结果是：

.row {
   margin-right: -15px;
   margin-left: -15px;    
}

.col {
   float: left;
   width: 33.33333333%;
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

这一切都很适合我。

获得完美的3列布局

5 个答案: