2

これが私のセットアップです：

コメント コンテナ div があります。この div 内には、さらに 3 つの div があります。2 つは float-left で、1 つは float-right です。

http://imgur.com/hkLI5

これらの 3 つの div の周囲には、角の丸い境界線があります。上の画像のどちらが左に浮いていて右に浮いているかを見分けるのはかなり簡単だと思います。

3 つのフローティング div の後に、目に見えない「クリア」な div があります。

<div style="clear:both; border:none;"></div>

私の問題は、「いくつかのテスト情報」divをコメントの一番下までスライドさせる方法が見つからないように見えることです（そのため、その下部は「クリア」divの上部の真上になります。

4

2 に答える 2

5

フロートはそのようには機能しません。要素は [insert simile here] のように常に上に浮きます。

おそらく、floatメソッドを放棄して、次のabsoluteようなポジショニングを使用する必要があります

bottom:0;
left:0;

これを行う場合は、topプロパティも設定する必要があるため、統計セクションの上にスタックされません。

于 2012-08-15T06:37:09.407 に答える
2

コンテナdiv内にコメントdivを追加し、"some test info" divこのコンテナ内にも追加します。これにより、コメントdivの下のdivを常に編集できる簡単なcssスタイルになります。

<head>
  <style type="text/css">
    div.comment_and_edit_container {
      float:left;
    }
    div.comment, div.edit {
      display:block;
    }
    div.comment {
      min-width:500px;
    }
  </style>
</head>
<div class="comment_and_edit_container">
  <div class="comment"></div>
  <div class="edit"></div>
</div>
于 2012-08-15T06:55:00.357 に答える