边界在Jeet.gs中破坏col()和span()

时间:2015-01-18 17:41:05

标签: css stylus jeet-grid

为使用来自jeet.gs的span()或col()布局的元素添加边框会导致每个元素对于父容器来说太宽。

有没有办法解决这个问题?

codepen中的一些示例。

http://codepen.io/aaaaargZombies/pen/yybYMZ

http://codepen.io/aaaaargZombies/pen/WbjQpK


<section>
  <div>block1</div>
  <div>block2</div>
  <div>block3</div>
  <div>block4</div>
  <div>block5</div>
  <div>block6</div>
</section>

edit()

section
  center(800px)
  text-align: center
div
  span(1/3, cycle: 3)
  margin-top: 5px
  margin-bottom: 5px

edit()

section
  center(800px)
  text-align: center
div
  span(1/3, cycle: 3)
  margin-top: 5px
  margin-bottom: 5px
  border 1px dashed red

1 个答案:

答案 0 :(得分:2)

嗯,这是因为这些div有一个标准的盒子模型,宽度不包括边框宽度(33.(3)%)。如果你给他们box-sizing: border-box一切都会好的。