ホームページ > 記事 > ウェブフロントエンド > HTML および CSS_html/css_WEB-ITnose における Web ページのレイアウトの問題
HTML および CSS_html/css_WEB-ITnose における Web ページのレイアウトの問題
- WBOYオリジナル
- 2016-06-24 11:50:001012ブラウズ
6 つの dc6dce4a544fdca2df29d5ac0ea9906b を含む HTML ページを記述するには、CSS を使用して dc6dce4a544fdca2df29d5ac0ea9906b 要素のレイアウトを実装します。 形式は次のとおりです。 ?専門家のアドバイスを求める
ディスカッションに返信する (解決策)
<div class="d1"></div><div class="dc"><div class="d2"></div><div class="d3"></div></div><div class="dc"><div class="d4"></div><div class="d5"></div></div><div class="d6"></div><style> *{margin:0px;padding:0px;} div{border:5px solid #000;margin-top:10px;} .dc{border:none;} .d1,.d6{width:500px;height:80px;} .dc div{float:left;width:200px;height:100px;} .d3,.d5{margin-left:90px;} .dc:after{display: block;content: '';clear: both;visibility: hidden; }</style> テスト後、IE7 では、上記のコードは図のように表示されます
次のように変更します:
<html><head> <style> *{margin:0px;padding:0px;} div{border:5px solid #000;margin-top:10px;} .dc{border:none;width:600px;} .d1,.d6{width:500px;height:50px;} .dc div{float:left;width:200px;height:100px;} .d3{margin-left:90px;} .dc .d4,.dc .d5{width:220px;} .d5{margin-left:50px;} .dc:after{display: block;content: '';clear: both;visibility: hidden; } </style></head><body><div class="d1">div_01</div><div class="dc"> <div class="d2">div_02</div> <div class="d3">div_03</div></div><div class="dc"> <div class="d4">div_04</div> <div class="d5">div_05</div></div><div class="d6">div_06</div></body></html> これは非常に簡単です、そうです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。