1

活生生的例子

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

4

1 回答 1

2

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

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

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

编辑1

在澄清需求后，这个答案更适合 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 进一步询问后，似乎他真正需要的是纯 HTML/ CSS 解决方案。考虑到这一点，我认为他按照960.gs采用固定布局，这将允许更好的选择来确定每个百分比应该是什么宽度。即：100% == 960px，所有细分都是固定宽度的一部分。

于 2012-09-04T23:48:34.857 回答