首頁 > web前端 > html教學 > 双飞翼布局怎么用?_html/css_WEB-ITnose

双飞翼布局怎么用?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:27:38
原創
1235 人瀏覽過


我做出来的是这样的,这是为什么啊?

#div-middle-02 {
float: left;
background-color: #fff9ca;
width: 100%;
height: 50px;
}

#middle-wrap-02 {
margin: 0 200px 0 150px;
}

#div-left-02 {
float: left;
position: relative;
background-color: red;
width: 150px;
margin-left: -100%;
height: 50px;

}

#div-right-02 {
float: left;
position: relative;
background-color: yellow;
width: 200px;
margin-left: -200px;
height: 50px;
}
这是我看别人的代码,为什么要margin-left:-100%;为什么要使用负边距,还有..为什么要定位,


        
div-middle

为什么这个DIV里要再加一个是什么意思,#middle-wrap-02 {
    margin: 0 200px 0 150px;
这个又为什么要加........我问题描述的很乱...求大家详细的指点我
}
..


回复讨论(解决方案)

双飞翼布局是什么东东?是左右两栏式布局?

利用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>
登入後複製

双飞翼布局是什么东东?是左右两栏式布局?


不是啊,是左右固定宽高,中间自适应

<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>
登入後複製


双飞翼布局是什么东东?是左右两栏式布局?


不是啊,是左右固定宽高,中间自适应
将我写的两栏一改就可以!我写的是左固定宽你在加一栏右固定宽,
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板