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方式一样清晰?
最佳答案
可以使用: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
关于javascript - CSS:如何像语义 ui 方式创建 colsgroup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19049571/