Question

LIVE EXAMPLE

所以我正在使用Chris Coyier's CSS3 box-sizing grid setup。而且我的网格设置得很完美。在每个模块的内部，我有一个div，它将背景设置为CSS3 RGBA线性渐变。一切都很好并且显示正常，但自从我使用padding以来，最后一个元素的背景占据了模块的宽度加上 padding。如果您查看可能进一步解释的示例，那么最后一个模块就是问题。我试图将最后一个元素重置为padding-right: 30px，形成正确的宽度但是它在容器的宽度上没有间隔100％。

Answer 1

请注意，此答案有多个修改以反映问题和需求的演变

你告诉浏览器每个元素是可用宽度的25％，然后你告诉它从每个元素的右边扣除30px以将它们分开。然后你告诉它“除了最后一个，不要从右边扣除任何东西”所以前三个真的是25％-30px，最后一个是唯一一个真正的25％。

如何解决这个问题取决于你在最终布局中想要什么，但是我会摆脱最后一项右边填充为0px的位，并将所有元素设置为左边填充15px和右边填充15px。

<强> EDIT1

在澄清需求之后，这个答案更适合OP：http://jsfiddle.net/Az3eH/

HTML：

<div class="grid">
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
</div>

CSS：

.tan-trans {
    background: #282816;
    background: -moz-linear-gradient(top, rgba(40,40,38,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,40,38,1)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282826', endColorstr='#00000000',GradientType=0);
    border-radius: 10px;
    padding: 20px;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[class*='col-']{float:left;padding-left:1%;padding-right:1%; padding-top: 30px; }

.col-1-1 { width: 100%; }
.col-1-3 { width: 33.33%; }
.col-2-3 { width: 66.66%; }
.col-1-2 { width: 50%; }
.col-1-4 { width: 25.5%; }
.col-1-8 { width: 12.5%; }
.col-3-8 { width: 37.5%; }
.col-5-8 { width: 62.5%; }
.col-7-8 { width: 87.5%; }
.col-1-16 { width: 6.25%; }
.col-3-16 { width: 18.75%; }
.col-5-16 { width: 31.25%; }
.col-7-16 { width: 43.75%; }
.col-9-16 { width: 56.25%; }
.col-11-16 { width: 68.75%; }
.col-13-16 { width: 81.25%; }
.col-15-16 { width: 93.75%; }
[class*='col-']:first-of-type {padding-left:0; padding-right: 1%; width: 24.5%}
[class*='col-']:last-of-type { padding-left: 1%; padding-right:0;width: 24.5%}

编辑2 在进一步询问OP之后，看起来具体的他需要的东西（混合百分比和固定宽度，加上可用宽度的100％，可变数量的列和大小）实际上不可能使用纯HTML / CSS解决方案。考虑到这一点，我认为他按照960.gs采用固定布局，这样可以更好地确定每个百分比的宽度。即：100％== 960px，所有细分都是固定宽度的一部分。

为什么我的CSS3框中的最后一个元素大小太宽？

1 个答案: