13

2つのdivが隣り合っており、どちらもラッパー内に左に浮かんでいます。IEとFirefoxでは正しく表示されますが、Chromeでは2番目のフローティングdivがDiv Aの下でクリアされます。cssで「float：left」を削除すると、Chromeでは正しい位置に移動しますが、IEとFirefoxではクリアされます。 （そうあるべきです）。Chromeでこのように表示される理由がわかりません。何か案は？

4

16 に答える 16

8

  1. HTMLとCSSはこれに答えるのに役立ちます。

  2. divが2つだけで、それらを並べてフロートさせたい場合は、それぞれに幅を設定し、一方を左にフロートさせ、もう一方を右にフロートさせます。2つの間にスペースを残すことを忘れないでください。

于 2009-06-18T14:44:58.307 に答える
6

私の場合display:inline-table、float要素の親要素に使用します。テーブルでなくても。

私はdisplay:inline-tableグーグルクロームが遭遇したバグを修正するためにを使用しました。

于 2013-01-16T09:12:03.837 に答える
2

Chromeでも同じ問題があり、display:inline-table親divに渡すことで解決します

于 2011-12-16T14:55:06.283 に答える
2

解決策は簡単です-これらすべてのdivを含むdivに属性を追加するだけです：display: table;-問題を解決するはずです。

于 2012-08-30T09:41:36.347 に答える
1

複数のcssfloatleft divがあり、内部にテキストリンクがあり、コンテナはそれぞれの右側でオーバーラップしていました。修正は、リンク表示テキストのスペースを削除することでした。例えば。...> TEXT </a>に...>TEXT</a>

于 2010-11-28T23:44:32.510 に答える
1

あなたは1divに高さを与えなければなりません

例えば

Div 1

.oneColFixCtrHdr #mainContent {
    background: #FFFFFF;
    width: 375px;
    height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-bottom: 0px;
    padding-top: 20px;
}

Div 2

.oneColFixCtrHdr #maincontent2 {
    background: #FFFFFF;
    width: 390px;
    height: auto;
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    padding-bottom: 0px;
    padding-top: 20px;
    padding-left: 20px;
    border-left-style: groove;
于 2011-10-05T15:38:42.173 に答える
1

Chromeの場合-この問題は、親要素の表示属性に関係しているようです。私は同じ問題を抱えていて、たくさんの検索をしました。最後に、親TDタグの表示CSS属性を削除して修正しました。私はまた、1つの賢明なことを観察しました。私がdisplay：blockを持っていたとき; 親のTDテーブル要素の場合、Chromeではcolspanが機能していませんでした（IEでは正常に機能していました）。私はこの問題を見つけてたくさんの髪を引っ掻いた。

于 2011-12-29T21:46:29.267 に答える
1

私はDivで同じ問題に直面し、その子スパンは両方とも正しくフロートしていました。解決するために、Divの親にインラインで表示を追加したところ、ChromeとSafariの両方で正常に動作するようになりました。

于 2013-01-25T01:44:51.563 に答える
1

私はすべてを包み込み<div style="display:inline;"> ... code .. </div>、問題を解決しました。

于 2013-05-25T08:18:32.163 に答える
0

私は同じ問題に直面しました。Chromeはfloatでdivを誤って表示します。ブロックは最初の下に表示されます。私が期待した方法はさておきません。ソリトンは簡単です！両方のブロックをdivで囲み、他の姉妹ブロックが内部にないようにします。

于 2010-05-05T10:04:55.753 に答える
0

  1. コード例がなければ、これは実際には推測にすぎません

  2. Chromeがどのように機能するかはわかりませんが、IEが独自のスタイルを宣伝していることは知っています。cssリセットを使用しましたか？ほとんどのクロスブラウザの問題はこれで修正できます。

  3. 2つのフローティングdivの合計幅がラッパーの幅を超えているように聞こえます。ラッパーの幅を100％に設定するか、幅を設定しないでください...または2つのフローティングdivの幅を減らしてみてください。

  4. それらのdivのいずれかに設定されたインライン、ブロックなどのスタイルプロパティを表示しますか？

于 2009-06-18T14:49:38.937 に答える
0

display：inline-blockと両方のdivの幅を設定するのはどうですか？

編集：パディング/マージンが設定されていない場合、それぞれに最大幅を％50に設定すると、IE6を除くすべてのブラウザーで機能します。

于 2009-06-18T14:50:36.753 に答える
0

float：leftプロパティが設定された内部divの束を持つコンテナdivがあるという問題がありました。私の最後の内側のdiv（右端）もラップダウンしました。マージンのある結合された内部divがコンテナdivの幅を超えないようにすることで、問題を修正しました。

Firebugに似たChromeの開発者ツールは、問題の解決に役立ちました。コンテナdivの場合、幅を明示的に設定しませんでしたが、chromeの開発者ツールで継承された幅を表示できました。次に、結合された内側のdivのすべての幅を調べてから、内側のdivの幅の一部を調整しました。

于 2010-09-09T19:05:35.937 に答える
0

フローティングの子divでも同様の問題が発生します。私の場合..私は周囲のdivを右にフロートさせていました。これには、h3要素（text-alignプロパティを含む）が含まれ、その後に2つの子ブロック要素が続きます。

その下の子ブロック要素に関連するインテントセンターh3テキスト。

-

問題？ブロックの子要素の幅を設定していませんでした。なぜですか。そのコンテナ内のテキスト量に対して、左右に明確なパディングを保持する幅が必要でした。例えば。パディング：10px 30px;

解決策私は、周囲のdivと子のdivに幅を設定し、子のdivの中央揃えのテキストを設定して、最初のケースの試行と同様の結果を得ることにしました。

于 2011-04-15T17:28:50.983 に答える
0

私も同じ問題を経験しました。floatを含む2つのdivがありました。テーブルtd内に残されています-style="text-align：left;"を含むようにテーブルtdスタイルを設定する必要がありました。それらが正しく整列するために。

于 2011-09-02T17:41:05.753 に答える
0

私はHTMLのヒーローではないので、私の場合、問題は本当にばかげていました。

これは単なる構文エラーだったので、私のように髪の毛を抜く前に、必ずすべての構文を確認してください。

そして、SAFARIはそれを完全に無視し、divを正しく表示していたので、私は本当に混乱しました。

基本的に、問題を引き起こしていたのは閉じられていないdivタグでした：

<div class="seperator" </div>    instead of    <div class="seperator"> </div>
于 2012-06-04T16:02:47.897 に答える