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