CSS：如何创建colsgroup像语义的UI方式

Question

的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方式清楚了吗？

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

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