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

WBOY
Freigeben: 2016-06-24 11:27:38
Original
1220 Leute haben es durchsucht


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

#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>
Nach dem Login kopieren

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


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

<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>
Nach dem Login kopieren


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


不是啊,是左右固定宽高,中间自适应
将我写的两栏一改就可以!我写的是左固定宽你在加一栏右固定宽,
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage