javascript - CSS:如何像语义 ui 方式创建 colsgroup

Question

the jsbin is here: http://jsbin.com/uMEjOV/1/edit

嗨，在语义 UI 中，( http://semantic-ui.com ) 我们可以创建:

<div class="ui three column grid">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
</div>

我尝试创建我自己的没有语义用户界面的 famework:

<div class="colsgroup">
    <div class="column">col 1</div>
    <div class="column">col 2</div>
    <div class="column">col 3</div>

    <!-- but i need extra class="close" to make it work -->
    <div class="close"></div>
</div>

我想要清晰的模型，就像语义 ui 方式一样。是的，我想删除 <div class="close"></div> (.close 的样式为 float: none; clear: both; )

如何做到像semantic-ui方式一样清晰？

Answer 1

可以使用:after伪元素代替多余的div.close

CSS:

.colsgroup:after {
  content:'';
  display:block;
  float: none;
  clear: both;
}

HTML:

  <div class="colsgroup" id="sample">
    <div class="column">col 1</div>
    <div class="column">col 2</div>
    <div class="column">col 3</div>
    <!-- no redundant div.close here -->
  </div>

现场演示:http://jsbin.com/uMEjOV/5/edit

CSS 伪元素在您需要减少额外的装饰性/辅助元素的数量，使 HTML 标记更轻量的情况下非常有用。您可以在这里阅读更多关于它们的信息:http://www.w3.org/TR/CSS2/selector.html#before-and-after