2

ページをより広い解像度で表示すると、セクションのコンテンツが中央ではなく右に揃えられることに気付きました。

私が使う

margin: 0 auto;
width: 998px;
overflow: hidden;

少なくともSafari、Firefox、Chromeではこのバグがあるようです。無効にしようとするoverflow: hiddenとバグはなくなりますが、コンテンツ内のフロートが台無しになります。

ここにあるライブページで例を見ることができます：http： //autouncle.dk/da/brugte-biler/Kiaまたはhttp://autouncle.dk/da/brugte-biler/Ford（でそれを見る必要がありますバグを確認するには、少なくとも1500pxのワイドスクリーン）。

このバグの原因となる可能性のあるアイデアと、考えられる解決策はありますか？

4

3 に答える 3

1

問題の理由について: これはpage-titleヘッダーの要素が原因です:

#header-outer要素にはいくつかのフローティング要素が含まれていますが、クリアを忘れているため、サイトのメイン セクションの左側のオフセットがpage-title終了位置から始まります。（要素を非表示にすることでこれを確認できます—ページが正しく中央に配置されるように設定するとpage-titledisplay: none）

ここに画像の説明を入力

だから追加

body#basic_page #header-outer {
   overflow: hidden;
}

あなたは問題を解決します

補足として、空の div をクリアの目的でのみ配置することは強く避けてください。easyclearing のように、追加のマークアップを必要としないよりクリーンなメソッドがあります。

于 2012-05-31T07:58:40.980 に答える
1

あなたのソリューションは削除されていますoverflow: hidden

あなたが与えた2番目の例のfloatバグを修正するには、幅の100％を使用してみてください：

body#basic_page.brands_controller #content .text_info {
   overflow: hidden;
   font-size: 12px;
   width: 100%; /* new rule */
}
于 2012-05-31T08:01:40.183 に答える
0

を取り外します

overflow:hidden

からdiv#content、その内容をエクストラ<div> に入れます。

width:100%;
overflow:hidden;

これで問題は解決します。

于 2012-05-31T07:55:46.553 に答える