html 安东尼卢克斯的钢笔。

Posted 2021-05-11

@import "compass";
$MARGIN: 10%;
$TRUE_WIDTH: 100% / (100% + $MARGIN);

@mixin blockWidth($numOfCols) {
  width: (1/$numOfCols * 100%) - ($MARGIN * $TRUE_WIDTH);
}


.container {
  width: 800px;
  background-color: blue;
  margin: auto;
}

.blocks {
  font-size: 0;
  margin-left: -$MARGIN;
}

.blocks > * {
  display: inline-block;
  font-size: 16px;
  background-color: green;
  margin-left: percentage(1 - $TRUE_WIDTH);
}

.blocks_2up > * {
  @include blockWidth(2);
}

.blocks_3up > * {
  @include blockWidth(3);
}

.blocks_4up > * {
  @include blockWidth(4);
}

rjitH
-----


A [Pen](http://codepen.io/anthonyLukes/pen/rjitH) by [Anthony Lukes](http://codepen.io/anthonyLukes) on [CodePen](http://codepen.io/).

[License](http://codepen.io/anthonyLukes/pen/rjitH/license).

<div class="container">
<ul class="blocks blocks_2up">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<br />

<ul class="blocks blocks_3up">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<br />

<ul class="blocks blocks_4up">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
</div>