请参阅以下codepen以了解我目前的内容: codepen.io/anon/pen/ GjWYPO
< div class =container> < div class =col-1-3 bg-blue>蓝色左侧< / div> < div class =col-1-3style =font-size:0px;> < div class =col-1-3 bg-green>绿色1< / div> < div class =col-1-3 bg-green>绿色2< / div> < div class =col-1-3 bg-green>绿色3< / div> < / div> < div class =col-1-3 bg-blue>蓝色右< / div> < / div>我的问题是,看着codepen,如何在绿色单元格之间创建一个装订线。我的研究指向使用负边距和填充,但我无法完全实现它。 就像这里描述的那样: www.helloerik/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
我的要求不是!创建更多div。我不想创建一个行包装器,如果能够解决当前笔中的html问题,我真的很开心。我不介意,并猜测它的解决方案的一部分,创建一个行类,并将其应用到父细胞(这里与ID'蝙蝠侠'),拿着绿色细胞。
第二个要求是,即使codepen示例使用3个单元格,该解决方案也适用于任意数量的单元格。所以它不能使用nth-child
第三,我真的不喜欢!使用flex来解决这个问题。
忽略容器类和font-size:0的东西,它只是一个临时修复程序,用于在使用内联块时删除空白区域。我真正的代码使用php缩小。
我希望这是有道理的。下面是我想要结果如何的图片:
感谢任何帮助,在此先感谢!
==编辑==
$ $ b $ p 解决方案您可以将此添加到您的CSS,它应该工作(测试):
.bg-green { width:calc((100% - ((3-1) * 2%))/(3/1)); 保证金率:2%; } .bg-green:最后一个孩子{ margin-right:0;编辑过的片段: <
.container {font-size:0;} [class | =col] {display:inline-块; vertical-align:top;位置:相对; col-1-3 {width:calc(100%/(3/1));}。col-2-3 {width:calc(100%/(3/2)); } .col-1 {width:100%;}。bg-blue {background-color:#42a5f5; color:#ffffff;}。bg-green {background-color:#66bb6a;颜色:#ffffff;}。bg-green {width:calc((100% - ((3-1)* 2%))/(3/1)); margin-right:2%;}。bg-green:last-child {margin-right:0;}< div class =container> < div class =col-1-3 bg-blue>蓝色左侧< / div> < div class =col-1-3style =font-size:0px;> < div class =col-1-3 bg-green> green 1< / div> < div class =col-1-3 bg-green> green 2< / div> < div class =col-1-3 bg-green>绿色3< / div> < / DIV> < div class =col-1-3 bg-blue> blue right< / div>< / div>
只需将3替换为您拥有的任意数量的列,并根据需要更改保证金右值即可。
具有负边距的版本
将标记稍微改变一点(与Bootstrap类似的结构):
< div class =col-1-3> < div class =bg-green>绿色1< / div> < / div> < div class =col-1-3> < div class =bg-green> green 2< / div> < / div> < div class =col-1-3> < div class =bg-green>绿色3< / div> < / div>以下是CSS的一部分
.children-has-gutters> div { padding-left:15px; padding-right:15px; box-sizing:border-box; } .bg-blue { background-color:#42a5f5; color:#ffffff; width:calc((100%/(3/1))+ 15px); }.container {font-size:0;} [class | =col] {display:inline-block; vertical-align:top;位置:相对;字体大小:20像素;} COL-1-3 {宽度:计算值(100%/(3/1));} COL-2-3 {宽度:计算值(100%/(3/2)); } .col-1 {width:100%;}。children-have-gutters {margin-left:-15px;}。保证金右:-15px;宽度:calc((100%/(3/1))+ 30px);}。children-has-gutters> div {padding-left:15px;填充右:15像素; box-sizing:border-box;}。bg-blue {background-color:#42a5f5;颜色:#FFFFFF;} BG-绿色{背景色:#66bb6a; color:#ffffff;}
< div class =容器> < div class =col-1-3 bg-blue>蓝色左侧< / div> < div class =col-1-3 children-has-guttersstyle =font-size:0px;> < div class =col-1-3> < div class =bg-green>绿色1< / div> < / DIV> < div class =col-1-3> < div class =bg-green>绿色2< / div> < / DIV> < div class =col-1-3> < div class =bg-green>绿色3< / div> < / DIV> < / DIV> < div class =col-1-3 bg-blue> blue right< / div>< / div>
请注意,您必须为每个蓝色列添加15px,以避免容器宽度问题。你可以玩耍并检查没有它会发生什么 - 容器中元素的宽度将为100% - 30px(负边距)。
See the following codepen for what I currently have: codepen.io/anon/pen/GjWYPO
<div class="container"> <div class="col-1-3 bg-blue">blue left</div> <div class="col-1-3" style="font-size:0px;"> <div class="col-1-3 bg-green">green 1</div> <div class="col-1-3 bg-green">green 2</div> <div class="col-1-3 bg-green">green 3</div> </div> <div class="col-1-3 bg-blue">blue right</div> </div>My question is, looking at the codepen, how do I create a gutter between the green cells. My research points to using negative margins and padding, but I cant get it to work at all. Something like described here: www.helloerik/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
My requirements are, not! to create any more div's. I dont want to create a "row wrapper", i would really be happy if its solvable with the html that is in the current pen. I dont mind, and guess its part of the solution, to create a "row class" and apply it to the parent cell (here with id 'batman'), holding the green cells.
Second requirement is, that even though the codepen example uses 3 cells, that the solution works on any amount of cells. So it cant be using nth-child
and third, I would really really prefer to not! use flex to solve this problem.
Ignore the container class and the font-size:0 thing, its only a temporary fix to remove white space when using inline-block. My real code uses php minification.
I hope this make sense. Below is a picture how I want the result to look like:
Would be grateful for any help, thanks in advance!
==edit==
Added requirement to not use flex.
解决方案You can add this to your CSS and it should work (tested):
.bg-green { width: calc((100% - ((3 - 1)*2%))/(3/1)); margin-right: 2%; } .bg-green:last-child{ margin-right: 0; }Edited snippet:
.container{ font-size: 0; } [class|="col"] { display:inline-block; vertical-align: top; position:relative; font-size:20px; } .col-1-3{ width:calc(100%/(3/1)); } .col-2-3{ width:calc(100%/(3/2)); } .col-1{ width:100%; } .bg-blue{ background-color:#42a5f5; color:#ffffff; } .bg-green{ background-color:#66bb6a; color:#ffffff; } .bg-green { width: calc((100% - ((3 - 1)*2%))/(3/1)); margin-right: 2%; } .bg-green:last-child{ margin-right: 0; }<div class="container"> <div class="col-1-3 bg-blue">blue left</div> <div class="col-1-3" style="font-size:0px;"> <div class="col-1-3 bg-green">green 1</div> <div class="col-1-3 bg-green">green 2</div> <div class="col-1-3 bg-green">green 3</div> </div> <div class="col-1-3 bg-blue">blue right</div> </div>
Just replace "3" with whatever numbers of columns you have and change the margin-right value as you like.
Version with negative margin
Change markup a little bit (similar structure to Bootstrap):
<div class="col-1-3"> <div class="bg-green">green 1</div> </div> <div class="col-1-3"> <div class="bg-green">green 2</div> </div> <div class="col-1-3"> <div class="bg-green">green 3</div> </div>And following part in CSS
.children-has-gutters > div { padding-left: 15px; padding-right: 15px; box-sizing: border-box; } .bg-blue { background-color:#42a5f5; color:#ffffff; width:calc((100%/(3/1)) + 15px); } .container{ font-size: 0; } [class|="col"] { display:inline-block; vertical-align: top; position:relative; font-size:20px; } .col-1-3{ width:calc(100%/(3/1)); } .col-2-3{ width:calc(100%/(3/2)); } .col-1{ width:100%; } .children-has-gutters{ margin-left:-15px; margin-right:-15px; width: calc((100% / (3/1)) + 30px); } .children-has-gutters > div{ padding-left:15px; padding-right:15px; box-sizing: border-box; } .bg-blue{ background-color:#42a5f5; color:#ffffff; } .bg-green{ background-color:#66bb6a; color:#ffffff; }<div class="container"> <div class="col-1-3 bg-blue">blue left</div> <div class="col-1-3 children-has-gutters" style="font-size:0px;"> <div class="col-1-3"> <div class="bg-green">green 1</div> </div> <div class="col-1-3"> <div class="bg-green">green 2</div> </div> <div class="col-1-3"> <div class="bg-green">green 3</div> </div> </div> <div class="col-1-3 bg-blue">blue right</div> </div>
Note that you had to add 15px to each blue column, to avoid issue with container width. You can play around and check what happens without it - width of elements in container would be 100% - 30px (negative margin).
更多推荐
divs之间的沟槽
发布评论