ホームページ >ウェブフロントエンド >htmlチュートリアル >html_html/css_WEB-ITnose で複数の div レイヤーを並べて表示する
html_html/css_WEB-ITnose で複数の div レイヤーを並べて表示する
- WBOYオリジナル
- 2016-06-24 12:15:261739ブラウズ
ページの中央の div レイヤーには 3 つのレイヤーがあります。 1,2,3
この3つのレイヤーを並べて表示したいのですが、Firefoxでは表示できるのですが、IEでは真ん中と後ろのレイヤーが落ちてしまいます。
解決方法を専門家に尋ねてください。 。 。 。
讨 返信 ディスカッション (解決策)
& & & lt;
& lt;/div & lt; T; div>3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68 ブラウザのサイズが変わると、内側の 3 つの div が横に並んで表示されるようにします。先生、理由を教えてください
誰も助けてくれません
<style type="text/css"><!doctype html><style type="text/css">#pages {width:900px;background-color:black;margin:auto;}#d1 {width:200px;height:100px;float:left;background-color:red;}#d2 {width:200px;height:100px;float:left;background-color:yellow;}#d3 {width:200px;height:100px;float:left;background-color:green;}</style><div id="pages"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div> //注: 並べて表示される div のすべての幅の合計は、親 div の幅を超えることはできません
上記のコード:最初の行は多すぎるので、削除してください:
<!doctype html><style type="text/css">#pages {width:900px;background-color:black;margin:auto;}#d1 {width:200px;height:100px;float:left;background-color:red;}#d2 {width:200px;height:100px;float:left;background-color:yellow;}#d3 {width:200px;height:100px;float:left;background-color:green;}</style><div id="pages"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div>
スタイルシートを使用して制御します
パーセンテージ制御を使用して幅を変更することもできます。これにより、ページのサイズに応じて div の幅が自動的に制御されます~~
DIV は幅に適応します、フローティング コードと幅を追加しないと不可能です
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。