欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

html css 布局的有关问题

更新时间: 2014-01-05 00:52:42 责任编辑: Author_N1

 

html css 布局的问题
看下面的html css 。
1,  id="right"的div 为什么顶部没有和id="left"的div顶部对齐?
2, 我想让id="center"的div占据parent div里除left div和right div 以外的空间(如下图所示),怎么做?



<html>
<head>
<style type="text/css">

body div{
margin: 0;
padding; 0;
}

#parent{
margin: 0 auto;
padding : 0;
width : 500px;
height : 500px;
outline: solid blue;
position : relative;
}

#left{
float: left;
width : 150px;
height: 150px;
outline:solid red;
}

#right{
float: right;
top: 0;
width : 150px;
height: 150px;
outline:solid yellow;
}

#center{
outline: solid;
}

.clear{
clear: both black;
}
</style>
</head>

<body>
<div id="parent">
<div id="left">
left
</div>
<div id="center">
center
</div>
<div id="right">
right
</div>

<div class="clear"/>
</div>
</body>
</html>
--参考方法--
right被center的位置影响到了,你在center的css里面加个position:relative;可以解决。
--参考方法--
第一个问题,元素的浮动是按顺序排的,如果中间没有center的话right块就会上去,和left对其,因为有center占据了两者中间的位置,而且是跟大容器宽度一样的,导致了right无法跟排在center的右侧,也就是换行了。
第二个问题
#leftpage,#centerpage,#rightpage{height:500px; border:none;}
#leftpage{width:150px;float:left;background:blue;margin:-500px 0 0 0;overflow:inherit;}
#centerpage{width:inherit;background:#fff;margin:0;padding:0 200px 0 150px;overflow:auto;}
#rightpage{width:200px;float:right;background:blue;margin:-500px 0 0 0;overflow:inherit;}

<div id="centerpage"><a href="#">中间内容中间内容中间</a>内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容容中间容中间内<a href="#">容中间内容中间内容中间内</a>容中间内容中间内容</div>
<div id="rightpage">右侧内容</div>
<div id="leftpage">左侧内容</div>

--参考方法--
center都把right的位置给占了,怎么对齐?right和center的div的顺序变一下就行了。
<div id="left">
left
</div>

<div id="right">
right
</div>
<div id="center">
center
</div>

--参考方法--
<head>
<style type="text/css">

 body div{
 margin: 0;
 padding; 0;
 }
.clearfix:after{ height:0; clear:both; content:""; visibility:hidden; display:block;}
 #parent{
 margin: 0 auto;
 padding : 0;
 width : 500px;
 height : 500px;
 outline: solid blue;
 position : relative;
 }

 #left{
 float: left;
 width : 150px;
 height: 150px;
 outline:solid red;
 }

 #right{
 float: right;
 top: 0;
 width : 150px;
 height: 150px;
 outline:solid yellow;
 }

 #center{
 outline: solid;
 margin:0 156px;
 height:150px;
 }
 .centerOut{ margin-left:156px;}

 </style>
</head>
<body>
<div id="parent" class="clearfix">
   <div id="left">left</div>
   <div id="right">right</div> 
   <div id="center">center</div> 
</div>
</body>//此处定义center的margin-left的宽度是左边宽度的实际宽度+边框宽度+自身边框宽度,margin-right的宽度是右边宽度的实际宽度+边框宽度+自身边框宽度,高度应与父窗口高度合适
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:52:42
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/894/
本文WWW.DOC100.NET DOC100.NET版权所有。