3

Firefox で修正できない奇妙な問題が発生しています。Chrome と Safari の両方で、float: left と float: right の列が適切に機能し、正しい位置に表示されますが、Firefox で表示するとめちゃくちゃになります。下のヘッダーがその上のセクションにあり、列が重なっています。私は周りを検索してきましたが、Firefox のフローティングの違いに対する具体的な解決策を実際に見つけることができません。誰かが私のコードを見て、何が起こっているのか教えてもらえますか? または、私が気付いていない Firefox のフロートに関する事実を誰かが持っていますか? ありがとうございました！

これが私のコードを含む私のJsFiddleです。フローターは、Firefox の JsFiddle で問題ないようです。私のページではありません。うーん、私は探し続けますが、フロートの問題だと確信しています..それらを削除すると、Firefoxですべてがうまく整列しました. 少なくとも左の列。

関連する float css は次のとおりです。

.fourtextleft {
    font-family: Roboto;
    text-decoration: none;
    text-transform: none;
    font-weight: 300;
    font-size: .5em;
    color: #666;
    float: left;
    width: 38%;
    height: auto;
    text-align: justify;
    margin: 0% 5% 2% 0%;
    padding: 4% 2% 3.5% 0%;
    vertical-align: middle;
}

.fourtextright {
    font-family: Roboto;
    text-decoration: none;
    text-transform: none;
    font-weight: 300;
    font-size: 1em;
    color: #666;
    float: right;
    width: 30%;
    height: auto;
    text-align: justify;
    margin: 3% 15% 2% 0%;
    padding: 4% 0% 3.5% 2%;
    vertical-align: middle;
}

.floaters {
    clear: both;
}

ご協力いただきありがとうございます。

ஃ シャリン

4

5 に答える 5

6

問題が再現可能でなければ、それが何であるかを言うのは難しい. ただし、問題を読んだだけで、個人的な経験clear: bothから、4 番目の CSS クラス (ヘッダー) に追加してみてください。さらに、2 番目のリストを右にフロートさせる必要がない場合もあります。代わりに、最初のリストが左に浮いたら余白を設定します。

繰り返しますが、問題が再現できないかどうかを確実に判断するのは困難です。この時点で、知識に基づいた推測を行うだけです。複製する方法を見つけたら、必ず元に戻してください。

于 2013-06-15T04:26:25.580 に答える
0

私は div のレイアウトで同じ問題を抱えていました。サンプル コードである css を使用して div に白い境界線を追加するという問題を解決しました。

<head>
    <title>Sample Layout</title>
    <style type="text/css">
        .divToLeft
        {
            width: 49.5%;
            float: left;
        }

        .divToRight
        {
            width: 49.5%;
            float: right;
        }
        .divToCenter
        {
            width: auto;
            float: none;
            **border-color: #FFF;
            border-width: 1px;
            border-style: solid;**
        }
    </style>
</head>
<body>

<div id="pnlMainHolder" style="width: 100%">

    <div id="Rep0" class="divToCenter">
    Rep0
    </div>
    <div id="pnlLeft" class="divToLeft">
        <div id="Rep1" class="divToCenter">
        rep1
        </div>
        <br />
        <div id="Rep3" class="divToCenter">
        rep3
        </div>
        <br />
        <div id="Rep5" class="divToCenter">
        rep5
        </div>
        <br />
        <div id="Rep7" class="divToCenter">
        rep7
        </div>
    </div>
    <div id="pnlRight" class="divToRight">
        <div id="Rep2" class="divToCenter">
        rep2
        </div>
        <br />
        <div id="Rep4" class="divToCenter">
        rep4
        </div>
        <br />
        <div id="Rep6" class="divToCenter">
        rep6
        </div>
        <br />
        <div id="Rep8" class="divToCenter">
        rep8
        </div>
    </div>
    <div id="Rep9" class="divToCenter">
    rep9
    </div>
</div>

</body>

これが助けになることを願っています！

于 2015-02-03T17:58:54.050 に答える