コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML および CSS_html/css_WEB-ITnose における Web ページのレイアウトの問題

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

WBOY
リリース： 2016-06-24 11:50:00
オリジナル
1054 人が閲覧しました

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>
ログイン後にコピー

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

関連ラベル：
HTML、CSS中的网页页面布局问题
ソース：php.cn
前の記事：CSS 属性の表示と Visibility_html/css_WEB-ITnose の違いを明確にするためのコード 次の記事：異なる画面解像度に応じて異なる画像を表示するにはどうすればよいですか? _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
OAuth 2.0 構成設定 phpmailer を使用して smtp.google.com サーバー経由でメールを送信していますが、OAuth2.0 構成を使用するように言われているため、機能しません。いくつ...
から 2024-04-06 11:12:57
0
1
408
強制更新は、Next.js の未定義のパスまたはエラー ページにアクセスした結果発生します。 未定義のパスまたはエラー ページにアクセスすると、Next.js がハード リフレッシュを実行し、コンテキストがデフォルトの状態に戻ります (つまり、userProfile 状態変...
から 2024-04-05 08:32:46
0
1
400
ルート ノードのリスト項目シンボル (<ul> および <ol>) は CSS で表示および削除できず、overflow-x: hidden の問題は解決できません。 現在、Web ページの作成に取り組んでいますが、リスト項目に問題があります。通常、各リスト項目の横に表示されるドットと数字は表示されません。また、CSS プロパティの overfl...
から 2024-04-04 16:38:22
0
1
3617
3. JS 3D モデルが追加されましたが、表示されません 自分の Web サイトに 3D モデルを追加しようとしています。 3 つの .js を使用しています。あらゆることを試しましたが、3D モデルを表示できませんでした。開発者ツールの...
から 2024-04-03 19:06:13
0
1
264
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート