1

jsbin 在这里：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>

我尝试在没有语义用户界面的情况下创建自己的：

<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;）

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

4

1 回答 1

0

您可以使用: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

于 2013-09-27T11:33:16.283 回答