8

cssの「clear」キーワードの意味がわからなくなったようです。

いくつかのdiv要素があり、すべて「float：left」です。最後から2番目のdiv要素にも「clear：right」があります。後続の要素が次の行に移動する原因になると思いました。しかし、私にとってはそうではありません。

これが私の例です：

<div class="Section">
    <div class="Thumbnail"></div>
    <div class="Number">0</div>
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div>
    <div class="Duration">00:00:32</div>
</div>​

このように見えます：

ここに画像の説明を入力してください

サムネイル（青い長方形）の右側の次の行に表示される期間（ "00:00:32"）を作成しようとしています。

最後の3つのdivを別のコンテナdivに入れることができることは知っていますが、この質問の目的は、「clear：right」によって期間がタイトルの右側に浮かぶのを止めない理由を理解することです。

CSSは次のとおりです。

div.Section
{
    overflow:auto;
    background:cornsilk;
    border:2px solid navy;
    padding:12px;
}

div.Section div.Thumbnail
{
    width:64px;
    height:42px;
    background:SteelBlue;
    foreground:Navy;
}

div.Number
{
    width:16px;
    margin-left:6px;
}

div.Duration
{
    margin-left:22px;
}

div.Section div
{
    float:left;
}

div.Section div.Title
{
    color:DarkGreen;
    clear:right;
}

そしてもちろん、jsfiddleリンク：http ：//jsfiddle.net/8J7V6/3/

4

5 に答える 5

12

プロパティは、clearクリアされた要素の後に要素がそのスペースに配置されることを妨げません。その前にその方向にフロートされた要素がすでに存在する場所に要素が配置されるのを防ぎます。clear:lefttoを追加するdiv.Durationと、ネイビーボックスの下に配置されます。期間の前に前を追加すると<br/>、問題が解決する場合があります。または、質問ですでに述べたように、最後の3つのdivに別のコンテナdivを使用できます。

于 2012-04-11T04:28:52.667 に答える
5

ahrussの答えは正しいですが、私はまた、誰もあなたの質問に実際に答えていないことに気づきました。基本的clear:leftに、左のフローティング要素を指します。clear:right右フローティング要素を指します。

要素は右ではなく左に浮いているので、clear:right影響はありません。

もう1つできることは、2つのテキスト要素を青いボックスとは別のdivでラップし、そのコンテナdivと青いdivをフロートさせます。次に、2つのテキスト要素をフロートすると、clear:leftコードはテキストの下に日付を配置します。コンテナdiv内で、左側の青い画像の下ではありません。

このような：

<div class="Section">
   <div class="Thumbnail"></div>
   <div class="TextContainer">
      <div class="Number">0</div>
      <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div>
      <div class="Duration">00:00:32</div>
   </div>
</div>

そしてこれをあなたのcssに追加してください：

div.TextContainer {
   float:left;
}

必要な他の視覚スタイルを追加します。

于 2014-01-23T15:37:14.043 に答える
1

パディングとマージンを使用しました。あなたのケースで使用することが不可能な場合は、次の解決策は適切ではありません。

http://jsfiddle.net/8J7V6/5/

于 2012-04-11T04:24:14.047 に答える
1

その右側には何も浮かんでいません。あなたが直面している問題は、あなたが時間の前にすでにすべてのコンテンツを送信していて、それからあなたが左に浮かぶ時間を指示しているということです。それはまだ左に浮かんでいて、すでに左にあるコンテンツの上に積み重ねられているだけです。

しかし、はい、右にクリアすると、その要素は、その前に右に浮かんでいるすべての要素を超えて分解されます。クリアはそれ以降の要素には影響しません。

タイトルの後にシンプルを使って<br />みましたか？

于 2012-04-11T04:24:58.460 に答える
0

.Duration { clear: left; }動作するはずです

于 2012-04-11T04:28:04.540 に答える