5

CSSフローティングを（頭の中で）動作させるのに苦労しています。

次の例に注意してください。

<style type="text/css">
    div.container {
        width:500px;
    }
    div.left {
        float:left;
        clear:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="left">leftdata 1</div>
    <div class="left">leftdata 2</div>
    <div class="right">rightdata 1</div>
    <div class="right">rightdata 2</div>
    <div class="right">rightdata 3</div>
    <div class="right">rightdata 4</div>
</div>

これにより、次の出力が得られます。

+---------------------------------------------------------------- -------------------+
| | 左データ 1 |
| | leftdata 2 rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
| | | |
+---------------------------------------------------------------- -------------------+

しかし、私はこれを期待していました：

+---------------------------------------------------------------- -------------------+
| | leftdata 1 rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
| | 左データ 2 |
| | | |
+---------------------------------------------------------------- -------------------+

明確な理由: 左; クリアも？

私の目標：

clear:right; のみを追加したい class: right でマークされた DIV に。これにより、次のようになります。

<style type="text/css">
    div.left {float:left;clear:left;}
    div.right {float:right;clear:right;}
</style>

+---------------------------------------------------------------- -------------------+
| | 左データ 1 右データ 1 |
| | 左データ 2 右データ 2 |
| | 右データ 3 |
| | 右データ 4 |
+---------------------------------------------------------------- -------------------+
4

5 に答える 5

4

最初の例では、ドキュメントの後半に表示されるため、rightdata-divs は leftdata-divs の下に配置されます。それらを最初に配置すると、期待どおりの結果が得られます。

または、次の行に沿って何かを試すことができます。

<style type="text/css">
  div.left {
    float: left;
  }

  div.right {
    float: right;

  }
  div.container {
    width:500px;
    overflow: auto; /* to make sure .container expands vertically */
  }


<div class="container">
  <div class="left">
    <div>leftdata 1</div>
    <div>leftdata 2</div>
  </div>
  <div class="right">
    <div>rightdata 1</div>
    <div>rightdata 2</div>
    <div>rightdata 3</div>
    <div>rightdata 4</div>
  </div>
</div>
于 2009-06-24T12:08:25.667 に答える
2

CSS では、なんらかの愚かな理由で、フロート div を配置する順序が重要になります。<div class="right"> を最初に (左のものを最初に配置する代わりに) 配置すると、右側の余分な改行になります。

もう 1 つ: cssの clear コマンドを使用するべきではないと思います。なんで？周囲の他の浮遊要素の影響を受ける可能性があるためです。つまり、clear:both は、現在の要素の浮動要素のスペースをクリアするだけでなく、ページ上のすべての浮動要素のスペースをクリアします。

より良い解決策は、overflow:auto; を使用することです。

あなたが望むものを達成するいくつかのコードがあります：


<style type="text/css">
    div.container {
        width:500px;
        overflow:auto;
    }
    div.left {
        float:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="right">rightdata 1</div>
    <div class="left">leftdata 1</div>
    <br>
    <div class="right">rightdata 2</div>
    <div class="left">leftdata 2</div>
    <br>
    <div class="right">rightdata 3</div>
    <br>
    <div class="right">rightdata 4</div>
</div>

編集:実際には、この状況では、左データ/右データ div の構成を生成するために clear も overflow:auto も厳密に必要ではありませんが、コンテナー div を div の高さまで拡張する場合は必要であることに注意してください。clear または overflow:auto がないと、div の高さは、含まれるフローティング div の高さに合わせて拡張されません。

于 2009-07-27T18:42:04.077 に答える
1

あなたの質問に答えるために、

clear:left

左をクリアしています。float：leftがある場合、clear：leftはそれをクリアします。float：leftとfloat：rightだけでは、実際には列の書式設定が得られないという点で、他のすべての人に同意します。

于 2009-06-24T12:16:25.603 に答える
1 
<style type="text/css">
    div.left {float:left;}
    div.right {float:right;}
    br.clear{clear:both;}
</style>

<div class="container">
    <div class="left">
         <div> data 1 </div>
         <div> data 2 </div>
         <div> data 3 </div>
    </div>
    <div class="right">
         <div> right data 1 </div>
         <div> right data 2 </div>
         <div> right data 3 </div>
    </div>
    <br class="clear" />
</div>
于 2009-06-24T12:02:39.173 に答える
1

あなたの最善の策は、次のようなことをすることだと思います：

+--------------------------------------------------------------------+
|+------------+                                       +-------------+|
|| leftdata 1 |                                       | rightdata 1 ||
|| leftdata 2 |                                       | rightdata 2 ||
|+------------+                                       | rightdata 3 ||
|                                                     | rightdata 4 ||
|                                                     +-------------+|
+--------------------------------------------------------------------+

編集: john misoskian が投稿したコードのように ^^

于 2009-06-24T12:06:08.057 に答える