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>

私はセマンティックUIの名声なしで自分自身を作成し​​ようとしています:

<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 に答える