ホームページ >ウェブフロントエンド >htmlチュートリアル >両翼レイアウトの使い方は？ _html/css_WEB-ITnose
両翼レイアウトの使い方は？ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:381235ブラウズ
私が作ったものはこうなのですが、これはなぜでしょうか？
#div-middle-02 {
float: 左;
background-color: #fff9ca;
width: 100%;
height: 50px;
#middle-wrap-02 {
margin: 0 200px 0 150px;
#div-left-02 {
float: 左;
background-color: 150px;
margin-left: 50px; ;
}
#div-right-02 {
float: 左;
background-color: 200px;
height: 50px;
これは、他の人のコードを見ています。なぜ margin-left:-100%; を使用する必要があるのでしょうか。なぜ、9de7ea18dd16faf6e277f1c6db1ae964
id="middle-wrap-02">45a2772a6b6107b401db3c9b82c049c2div-middle54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68この DIV に別の DIV を追加するとはどういう意味ですか? #middle-wrap- 02 {
margin: 0 200px 0 150px;
なぜこれを追加する必要があるのですか...問題の説明が非常にわかりにくいです...詳しく教えてください
}
..
ディスカッション（解決策）への返信
両翼レイアウトとは何ですか？ 2カラムレイアウトですか？
display:table と display:table-cell の使用
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no, minimal-ui" ><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>two cell layer</title><style type="text/css">body {width:100%;height:auto;}body {font:14px/1.6 Tahoma,microsoft yahei,"微软雅黑","宋体";color:#666;}body,dl,dd,dt,h2,h1,h3,p,ul,li,strong,img,button, input, textarea{margin:0;padding:0}/*框架*/#sitepage{display:table;width:100%}#left_navi,#right_body{display:table-cell;vertical-align:top;height:600px}#left_navi{background-color: #3C4852;}#right_body{background-color:#ddd}.w270{width:270px;}</style></head><body><div id="sitepage"> <div id="left_navi" class="w270"> </div> <div id="right_body"> </div></div></body></html> 二重全翼レイアウトとは何ですか? 2カラムレイアウトですか？ いいえ、左右の幅と高さは固定で、中央は適応的です
<style>.left { float : left; width : 150px; height : 50px; background : green;}.right { float : right; width : 150px; height : 50px; background : blue;}.main { height : 50px; background : orange;}</style><div class=left>左边</div><div class=right>右边</div><div class=main>中间</div>
いいえ、左右の幅と高さは固定で、真ん中は適応です
私が書いた2つの列を変更するだけです！私が書いたのは左側に固定幅で、右側に固定幅の列を追加しています、