0

最近、属性を持つ<div style="clear:both;"></div>after eachdiv要素を使用していfloat: left/rightます。

現在、ニュース システムのループを進めており、いくつかの要素を右側にフロートさせたいと考えています。

問題は、clear: both;各フロートの後に属性を使用することは良い習慣ですか? それを使用しない場合に備えて、それに代わるものはありますか？

ニュースの現在の HTML は次のようになります。

<div id="news">
     <div class="date" style="float: right;">06-05-2013</div>
     <div style="clear:both;"></div>

     <div class="text">[...]</div>

     <div id="comment-block" style="float: right;">Comment on this news</div>
     <div style="clear:both;"></div>
</div>
4

6 に答える 6

1

最終的には、何を達成しようとしているかによって異なります。

相対的に配置された要素のネストがあり、他の子に影響を与えずに一部の内側の子を左または右に配置したい場合は、フロートと即時クリアがこれを達成するためのより適切な方法の 1 つです。

他の方法は、絶対位置、またはマージンと固定幅を使用することです。しかし、これらのどちらも最終的にはブラウザにそれを右側に配置してからインラインでレンダリングするように要求するほど柔軟ではありません。

于 2013-05-06T08:47:57.287 に答える
1

さて、次のことができます。

http://jsfiddle.net/qzbNr/6/

CSS

div.floats {
    padding: 10px;
    background-color: #eee;
    margin: 10px 0;
}

div.floats > div {
    float: left;
    width: 20px;
    height: 20px;
    background-color: #333;
}

div.floats > div + div {
    margin-left: 10px;
}

div.overflow-hidden {
    overflow: hidden;
}

div.box-sizing {
    width: 100%;
    box-sizing: border-box;
}

div.known-width {
    /* 200px - 2 * 10px of padding */
    width: 180px;
}

div.calc {
    width: calc(100% - 20px);
}

div.after-pseudo:after {
    content: "";
    display: block;
    clear: both;
}

div.clear {
    float: none !important;
    clear: both !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

HTML

<div class="floats overflow-hidden box-sizing">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden known-width">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats overflow-hidden calc">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats after-pseudo">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="floats extra-markup">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

オーバーフローのアプローチは面倒です。トリックはオーバーフローの非表示と定義された幅です。ボックス モデルのサイズに注意する必要があります。ツールチップなどのようなものを表示したい場合は、問題が発生しますが、それ以外にもあります。古典的で、かなりうまく機能します。

疑似アプローチは最高の私見です。実際、CSS には常に .clear:after があります。

何の意味もない要素を追加し、幅 !important などを適用する他のスタイルに注意する必要があるため、余分なマークアップのアプローチは最悪です。

于 2013-05-06T08:51:35.280 に答える
0

場合によっては、フロートをクリアすることが実際に正しい/最善の方法ですが、インライン スタイルは (ほぼ例外なく) 良くないため、CSS クラスはスタイルではなく意味に基づいて名前を付ける必要があります。CSS の最も強力な機能の 1 つは、コンテンツをプレゼンテーションから分離することです。

ほとんどの場合、クリアを使用するよりもフロートを含める方が適切であり、インライン スタイルや非セマンティック クラス名を使用するよりも常に含める方が適切です。

ブロック書式設定コンテキストを作成することにより、float を含める方法がいくつかあります-- https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_contextを参照してください

http://colinaarts.com/articles/float-containment/の詳細情報と簡単なチュートリアル(特に「してはいけないこと」セクション)

とはいえ、質問の特定のケースで同じレイアウトを実現するために必要なのは、@Juhana がコメントしたようにテキストを揃えることだけです。サンプルコード;

HTML

<div id="news">
     <div class="date">06-05-2013</div>
     <div class="text">[...]</div>
     <div class="comment-block">Comment on this news</div>
</div>

CSS

.date,
.comment-block {
    text-align: right;
}
于 2013-05-06T09:11:08.923 に答える
0

サイトをどのように見せたいかによって異なります。一般に、フロートをクリアすることは、親要素の高さを正しく設定するために非常に重要です。

ただし、インラインスタイルで要素をクリアするためにクラスを使用する方が便利な場合があることに注意してください。

次のようなことを試してください：

.clear
{
    clear:both;
}

そして、次を使用してください：

<div class="clear"></div>

このようにして、各 div のインライン スタイルを手動で編集することなく、div をクリアするために必要な他のスタイリングを実行または微調整することができます。

于 2013-05-06T08:51:07.043 に答える