ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS フローティング ie7 互換性の問題、下マージンが増加_html/css_WEB-ITnose
CSS フローティング ie7 互換性の問題、下マージンが増加_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:131341ブラウズ
大きな箱の中に左右に2つの箱が浮かんでいます。左側の箱には黄色の部分（浮いていません）があり、その下には左右に2つの青い部分があります。
IE7 では、大きなボックスの下に余分なパディングと底部の距離があるようで、すべての内部パーツの高さを自動で設定する必要があります。
通常の状況では:
IE7 では:
使用できないメソッド:
1. 黄色の部分もフローティングになります。 // 右側の黄色のボックスは内部に複雑なコンテンツ レイアウトを持っている場合があるため、すべてをフローティングすることはできません
2 . ie7hack;
高さを固定する
何か賢い方法はありますか？
コードは以下の通りです
<style>*{ margin:0; padding:0;}li{ list-style:none;}.fix{zoom:1;}.fix:after{content:""; display:block; clear:both; height:0; visibility:hidden;}.box{ width:400px; margin:0 auto; border:1px solid #f69; margin-bottom:20px; margin-top:50px;}.box_left{ width:260px; float:left;}.box_right{ width:120px; float:right; background:#FFC;}.not_float{ width:100%; height:40px; margin-bottom:20px; background:#FFC;}.ready_float_left{ width:160px; float:left; background:#09f; color:#fff;}.ready_float_right{ width:80px; float:right; background:#09f; color:#fff;}.box2{ width:400px; height:100px; margin:0 auto; border:1px solid #f69;}</style></head><body><div class="box fix"> <div class="box_left"> <div class="not_float"> </div> <div class="ready_float_left"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="ready_float_right"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> <div class="box_right"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div></div><div class="box2"></div>
ディスカッションへの返信(解決策)
.not_float{ width:100%; height:40px; background:#FFC;}.ready_float_left{ width:160px; float:left; margin-top:20px; background:#09f; color:#fff;}.ready_float_right{ width:80px; float:right; margin-top:20px; background:#09f; color:#fff;} margin-bottomに問題がありますnot_float の左側に float を追加しますフロート:左
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。