HTML および CSS_html/css_WEB-ITnose における Web ページのレイアウトの問題-htmlチュートリアル-php.cn

HTML および CSS_html/css_WEB-ITnose における Web ページのレイアウトの問題

WBOY

リリース： 2016-06-24 11:50:00

オリジナル

1039 人が閲覧しました

6 つの

を含む HTML ページを記述するには、CSS を使用して

要素のレイアウトを実装します。形式は次のとおりです。 ?専門家のアドバイスを求める

ディスカッションに返信する (解決策)

<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>

ログイン後にコピー

これは非常に簡単です、そうです