有没有人知道要将第div
项放在第一行中col-3-12
,而offset-6-12
类的偏移量为offset-9-12
且body {
font:20px/1.2 Verdana, Arial; padding:0px; margin:0px;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
}
.container {
padding: 20px 20px 0 20px; background-color: red
}
.row {
padding: 0;
*zoom: 1;
}
.row:after, .row:before {
content: ' ';
display: table;
}
.row:after {
clear: both;
}
.row > [class*='col-']:first-child {
margin-left: 0;
}
.row > [class*='col-']:last-child {
margin-right: 0;
}
.row > [class*='col-'] {
/* edit here*/
margin:0px 10px 20px 10px
}
[class*="col-"] {
float:left;
height:300px;
background-color: #dedede;
border: 1px solid #000;
}
[class*=col-]:last-of-type {
}
.col-1-12 {
width: calc((100% - (12/1 - 1) * 20px) / 12 * 1);
}
.col-2-12 {
width: calc((100% - (12/2 - 1) * 20px) / 12 * 2);
}
.col-3-12 {
width: calc((100% - (12/3 - 1) * 20px) / 12 * 3);
}
.col-4-12 {
width: calc((100% - (12/4 - 1) * 20px) / 12 * 4);
}
为我的网格系统的右侧jsFiddle
CSS:
<div class="container">
<div class="row">
<div class="col-3-12 offset-6-12">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-3-12 offse-9-12">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="row">
<div class="col-3-12">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-3-12">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-4-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col-2-12">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
HTML:
{{1}}
答案 0 :(得分:9)
那么,对于偏移量,您需要将左边距应用于浮动列以将它们推到右侧。
margin-left
的值等于:
第一列,其本身没有左边距:width
previous columns + the gutter width
。
第二列(其他列):
如果列有左/右margin
(创建装订线):
width
+ previous columns
+ the gutter width
的{{1}}。 (由于列的左/右1/2 gutter width
为沟槽宽度的1/2,因此
如果列没有margin
(即只有margin-left
创建了装订线): >
margin-right
+ width
的{{1}}。
例如:
previous columns
的左边距:the gutter width
<强> WORKING DEMO 强>
注意:我在这里使用了多个选择器,以便拥有更高的 specificity value 。
另请注意,由于列彼此相邻浮动,您只需要使用第一列的.offest-6
类将它们都推到右侧。
由于该列具有左(和右)边距(等于阴沟的1/2(.row [class*="col-"]:first-child.offest-6-12 {
margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px);
/* | width of col-6-12 | + gutter width */
}
)
.offset-*
<强> UPDATED DEMO 即可。 (Sassy方式: Sass version )
对于第二列,您应该使用10px
,因为当前列之前还有另一个.row [class*="col-"].offest-6-12 {
margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px + 10px);
/* | width of col-6-12 | + (1 + 1/2) gutter width */
}
列。
即。 您应该计算列数,包括偏移量
例如:offset-6
+ col-3
= col-3
。如果添加更多列,它将会超过连续12列的限制而中断流程。
我们如何更改CSS中的代码以补偿
col-3 including offset-6
上的代码12 columns
函数的结束,CSS中可能存在某些内容 在那里使其工作没有30px
。所以它可以通过计算calc()
gutter而不是30px
现在,列的左右边距为20px
,可创建30px
排水沟。这就是为偏移量添加额外10px
到装订线宽度的原因。
我们可以使用20px
作为列而不是左侧和右侧的两个边距(并且最后一列没有边距)。在这种情况下,我们不需要添加额外的10px
。
<强> WORKING DEMO 强>