css - 複数 - nth-of-type




クロムの2番目の浮動divは最初のdivの前にクリアされます (11)

2つのdivが隣同士にあり、両方ともラッパー内に残っています。 IEとFirefoxでは正しく表示されますが、Chromeでは2番目の浮動小数点divがDiv Aより下にクリアされます。cssで "float:left"を削除すると、Chromeでは正しい位置に移動しますが、IEとFirefoxではクリアされます。 (それがそうであるように)。 なぜChromeでこのように表示されているのかわかりません。 何か案は?


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

  2. あなたがたった2つのdivを持っていて、それらを互いに隣り合って浮かべることを望むならば、それらのそれぞれに幅を設定し、そして一方を左に、もう一方を右に浮かべる。 両者の間にはある程度のスペースを空けてください。


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

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

  3. 2つの浮動divの合計幅がラッパーの幅を超えているように聞こえます。 ラッパーの幅を100%に設定するか、幅を0に設定するか、2つの浮動小数点divの幅を狭めます。

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


float:leftプロパティが設定された一連の内部divを持つコンテナdivがあるという問題がありました。 私の最後の内側のdiv(一番右)もまとめました。 マージンを含む内側のdivをコンテナのdivの幅を超えないようにして、問題を解決しました。

firebugに似たChromeの開発者ツールは、私が問題を解決するのを手助けするのに優れていた。 私のcontainer divでは明示的に幅を設定していませんでしたが、chromeの開発者ツールは継承した幅を表示することができました。 それから私は結合された内側のdivのすべての幅を見て、そして次に内側のdivの幅のいくつかを調整しました。


あなたは1 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;
}

部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;

私はChromeでも同じ問題を抱えていて、 display:inline-tableをparent divにすることで解決していdisplay:inline-table


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

これは単なる構文エラーなので、私のように髪の毛を引き出す前に必ずすべての構文をチェックしてください。

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

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

<div class="seperator" </div>    instead of    <div class="seperator"> </div>

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


私は内部にテキストリンクを持った複数のcss float left divを持っていました、そしてコンテナはそれぞれの右側を重ねていました。 修正は、リンク表示テキスト内のスペースを削除することでした。 例えば。 ...> TEXT </a>から...>TEXT</a>


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


表示の設定はどうですか?インラインブロックと両方のdivの幅

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


私の場合、私はdisplay:inline-tableを浮動要素の親要素に使用しdisplay:inline-table 。たとえテーブルでなくても。

google chromeが遭遇したバグを修正するためにdisplay:inline-tableを使用しました。





css-float