0

したがって、私はcssとhtmlの両方にかなり慣れていませんが、フロートを使用して2つのdivを隣り合わせに配置したのはこれが初めてではありません。今回は正常に動作せず、約 3 時間いじくり回しており、助けを求める必要があると考えています。

問題を説明しやすくするために、jsFiddle で自分の Web サイトの一部を編集しました。

http://jsfiddle.net/9QRcP/10/

4

4 に答える 4

2

div問題は、をに割り当てていないことではありませんがfloat: right、 がdivページ幅内に複数を収めることができるほど十分に小さいため、本来行うべきことを正確に行っています。

ただし、これを修正するには、andを追加clear:rightしますが、それらを level に強制するわけではないため、問題は完全には修正されません。#about_side#about_side_footer

この問題も解決するには、左右のラッパーをそれぞれ個別にフロートする代わりに、ラッパー#greeting_wrapperを左右にフロートします。#about_wrapper

#greeting_wrapper {
  float: left;
}

#about_wrapper {
  float: right;
}

#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
  float: none;
}
于 2012-05-01T23:46:57.413 に答える
1

#greeting_wrapperfloatとが必要であることがわかりました#about_wrapper。これらのラッパーは重要な要素です。私が知る限り、これらdivの s の子もフロートする必要はありません。

また、現在、これらdivの s は 960px の本体の幅を取っているため、両方divの s が新しい行に強制されています。

于 2012-05-01T23:44:07.480 に答える
0

私はあなたのコードをいじくりまわしました：http：//jsfiddle.net/9QRcP/15/

わざわざ位置合わせを修正していませんが、左が左に、右が右になりました。

私自身の承認では、これはこれに対するあまり良いアプローチではありません。いくつかの指針：

  1. 'clear：left'を使用すると、左側の要素を強制的に新しい行に移動できますhttp://www.w3schools.com/cssref/pr_class_clear.asp
  2. おそらく、左右の要素を2つの別々のコンテナに含める必要があります（たとえば、class ="containerleft"とclass="container-right"）。次の垂直レベルに移動する左側のコンテナ内のサブ要素、および同様に右側のコンテナ内の要素については、左をクリアします。これにより、ページを簡単に列に分割できます。これは私が以前に準備したものですhttp://jsfiddle.net/9QRcP/19/http://www.quirksmode.org/css/clearing.htmlから
  3. http://960.gs/などのグリッドシステムを使用すると、おそらく多くの作業を節約できます。
于 2012-05-01T23:40:03.043 に答える
-1

問題はラッパーの幅にあります。幅を大きくすると、フロートdivが右側に配置されます。

于 2012-05-01T23:30:41.887 に答える