ホームページ >ウェブフロントエンド >htmlチュートリアル >フローティング DIV レイアウトの問題の解決 (下に配置する方法) (回路図を添付)_html/css_WEB-ITnose
フローティング DIV レイアウトの問題の解決 (下に配置する方法) (回路図を添付)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:091262ブラウズ
私は CSS+DIV が苦手で、今日はこの頭痛の問題に遭遇しました。それを示すために絵を描きました
おそらくインターフェースはこのようになっており、すべて浮動 DIV です...
に返信します。議論（解決策）
写真の意味は、左側の効果を実現するためのものです...明確に説明していなくて申し訳ありません
中央のレイアウトに使用される float:left を使用します一番下に来たら、直接クリアしてください
最近 IQ に問題があるので、投稿者が提起した質問の意味がわからないことがよくあります。 。 。 。
コード:
<div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt2"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div class="D" style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><style>.aa{width:48%;border:solid 2px;float:left;zoom: 1;margin-right:10px;}.aa:after { content: " "; display: block; clear: both; height: 0;}.tt{width:100%; zoom: 1;}.tt:after { content: " "; display: block; clear: both; height: 0;}.tt2{position:relative;width:100%;zoom: 1;}.tt2:after { content: " "; display: block; clear: both; height: 0;}.D{position:absolute;bottom:0;right:0;}</style> 「下揃え」?これはそうではありません。
絶対位置を使用して「D」の下端を揃えることができます。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style> .box { background-color: gray; width: 400px; height: 300px; } .foo { background-color: green; width: 80px; height: 160px; bottom: 0px; right: 0px; } .absolute { position: absolute; } .relative { position: relative; }</style> <div class="box absolute"> <div class="foo absolute">D </div> </div> </body></html> 最近の IQ の問題については、投稿者が提起した質問の意味がわからないことがよくあります。 。 。 。
コード:
<div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><div class="aa"> <div class="tt" style="height:200px;background:red;">A</div> <div class="tt2"> <div style="width:70%;float:left;background:yellow;height:400px;">B</div> <div class="D" style="width:30%;float:left;background:green;height:100px;">D</div> </div> <div class="tt" style="height:200px;background:blue;">C</div></div><style>.aa{width:48%;border:solid 2px;float:left;zoom: 1;margin-right:10px;}.aa:after { content: " "; display: block; clear: both; height: 0;}.tt{width:100%; zoom: 1;}.tt:after { content: " "; display: block; clear: both; height: 0;}.tt2{position:relative;width:100%;zoom: 1;}.tt2:after { content: " "; display: block; clear: both; height: 0;}.D{position:absolute;bottom:0;right:0;}</style> 兄弟は私の問題を完璧に解決し、互換性に関する解決策も提供してくれました。これは素晴らしいです
投稿のポイントです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。