CSS如何控制DIV的位置?
想详细了解下CSS如何控制DIV的位置,对CSS中的各个属性不是很了解,希望能给出一个示例页面
左侧一个窄栏,右侧宽栏,1024×768分辨率下满屏的两分栏示例页面,CSS中各个属性说明下具体用处,谢谢.
本问题将追加分数至200分(为了不断将问题提置顶,分数会分期追加,结贴前补齐200分,如果示例页面做的好另外再追加50分!)
第1个回答 推荐于2016-11-27
先得想好是要用绝对定位换是要相对定位
Relative 相对定位：left 和top
position: relative;/*相对定位*/
left:40px;/*在原来的位置向右移动*/
top:100px;/*在原来的位置向下移动*/
他的参照点是他原来位置
Absolute 绝对定位：元素从原来的位置脱离，让出原来的空间，同时相对于他所
存在的离自己最近的非标准流的盒子而言的
position: absolute;/*绝对定位*/
left:40px;/*在原来的位置向右移动*/
top:100px;/*在原来的位置向下移动*/
他的参照点是他原来位置
Fixed 只根据body的绝对定位
Relative 相对定位：left 和top
position: relative;/*相对定位*/
left:40px;/*在原来的位置向右移动*/
top:100px;/*在原来的位置向下移动*/
他的参照点是他原来位置
Absolute 绝对定位：元素从原来的位置脱离，让出原来的空间，同时相对于他所
存在的离自己最近的非标准流的盒子而言的
position: absolute;/*绝对定位*/
left:40px;/*在原来的位置向右移动*/
top:100px;/*在原来的位置向下移动*/
他的参照点是他原来位置
Fixed 只根据body的绝对定位
第2个回答 推荐于2018-02-27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
<!--
html,body{ margin:0; height:100%}
#wrapper{ margin:0 auto;width:80%;height:100%}
#left{ float:left; width:30%; height:100%; background:#eeeeee}
#right{ float:left; width:70%; height:100%; background: #eeeecc}
-->
</style>
</head>
<body>
<div id="wrapper" style="float:inherit">
<div id="left">左侧栏</div>
<div id="right">右侧栏</div>
</div>
</body>
</html>
学CSS没必要这样到处问嘛,找几套DIV+CSS布局的站看看CSS怎么写的不就得了
#wrapper{ margin:0 auto;width:80%;height:100%}
这是控制整页面的那个DIV的,要满屏就调整width本回答被提问者和网友采纳
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
<!--
html,body{ margin:0; height:100%}
#wrapper{ margin:0 auto;width:80%;height:100%}
#left{ float:left; width:30%; height:100%; background:#eeeeee}
#right{ float:left; width:70%; height:100%; background: #eeeecc}
-->
</style>
</head>
<body>
<div id="wrapper" style="float:inherit">
<div id="left">左侧栏</div>
<div id="right">右侧栏</div>
</div>
</body>
</html>
学CSS没必要这样到处问嘛,找几套DIV+CSS布局的站看看CSS怎么写的不就得了
#wrapper{ margin:0 auto;width:80%;height:100%}
这是控制整页面的那个DIV的,要满屏就调整width本回答被提问者和网友采纳
第3个回答 2008-05-21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
<!--
html,body{ margin:0; height:100%}
#wrapper{ height:100%}
#leftbar{ float:left; width:30%; height:100%; background:#9C0}
#rightbar{ float:left; width:70%; height:100%; background: #0099CC}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="leftbar">左侧栏</div>
<div id="rightbar">右侧栏</div>
</div>
</body>
</html>
本页面是我刚做的，在ie6，ie7，firefox，opera下测试均是自动适应满屏。无论是多少分辨率。
一般页面body一定要设margin:0因为浏览器默认是有值给他的。没有设成0就不能100%满屏。
这里用了百分比来设定宽度和高度，是因为每个浏览器的宽度和高度有些差别。如果都设成像素就不能在所有浏览器里都满屏。
leftbar,rightbar里设float:left是为了让层浮动并横向向左排列。
再外面加wrapper是为了更好的控制里面的栏目。如果哪天栏目要是想变窄或者像增高，就只要改这里的宽度和高度就行了，而不必再去动里面的两个层。
当然这里你也可以设成宽度是像素的形式。一般我设1003宽，在1024*768下。高度很少去定义，因为浏览器装插件和没装高度差别比较大。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
<!--
html,body{ margin:0; height:100%}
#wrapper{ height:100%}
#leftbar{ float:left; width:30%; height:100%; background:#9C0}
#rightbar{ float:left; width:70%; height:100%; background: #0099CC}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="leftbar">左侧栏</div>
<div id="rightbar">右侧栏</div>
</div>
</body>
</html>
本页面是我刚做的，在ie6，ie7，firefox，opera下测试均是自动适应满屏。无论是多少分辨率。
一般页面body一定要设margin:0因为浏览器默认是有值给他的。没有设成0就不能100%满屏。
这里用了百分比来设定宽度和高度，是因为每个浏览器的宽度和高度有些差别。如果都设成像素就不能在所有浏览器里都满屏。
leftbar,rightbar里设float:left是为了让层浮动并横向向左排列。
再外面加wrapper是为了更好的控制里面的栏目。如果哪天栏目要是想变窄或者像增高，就只要改这里的宽度和高度就行了，而不必再去动里面的两个层。
当然这里你也可以设成宽度是像素的形式。一般我设1003宽，在1024*768下。高度很少去定义，因为浏览器装插件和没装高度差别比较大。
第4个回答 2008-05-24
这样问，别人说的再好，你只能学皮毛。没法学会的。
你去买本书，看了就知道了。书买国产的，适合入门。
DIV+CSS说简单非常简单，说难就很难了。
就是很多很简单的你都知道的，你把你知道的，全部再看一遍下来，那你就知道怎么用DIV+CSS了。
你去买本书，看了就知道了。书买国产的，适合入门。
DIV+CSS说简单非常简单，说难就很难了。
就是很多很简单的你都知道的，你把你知道的，全部再看一遍下来，那你就知道怎么用DIV+CSS了。
第5个回答 2021-11-01
第一，要给DIV设置一个宽度
第二，要把BODY设置text-align:center
这种方法只针对IE浏览器有效。
如果要针对火狐等标准浏览器，必须设置div的margin为auto
第二，要把BODY设置text-align:center
这种方法只针对IE浏览器有效。
如果要针对火狐等标准浏览器，必须设置div的margin为auto
相似回答
