在设置div的float属性时,绿色部分被块元素给挡住了,原因是因为未设置绿色部分的宽度,所以浏览器默认是auto,在css样式中把它的宽度弄小一点就好了。
在这个页面中body的外边距是20%(左边右边),所以剩下部分是60%。绿色部分(设置了id=“guarantee”),将其width:60%,是指占它父元素的60%;把width:100%才是整个body的60%(会延伸到饮料那里去)。
修正边栏与主内容融合在一起的问题
解决:如果为主内容设置适当的外边距,让外边距和边栏的宽度相等,因为外边距是透明的,不会显示背景图像,所以页面本身的背景颜色(body ->banckground)会透过来,就可以达到效果。
为什么不直接设置主内容的宽度?
答:如果对内容区和边栏都设置宽度,会有一个问题,这样不允许页面正确地扩展和收缩。因为他们都有固定的宽度。
如果对主内容区和边栏都设置宽度:
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 350px 10px 10px;
width:900px; /*将主内容区和边栏区都设置了宽度*/
}
#sidebar {
background: #efe5d0 url(images/background.gif);
width:300px;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
float:right;
}
将main中的宽度设置删除:
在做登录界面的时候,账号和密码会分行显示
错误原因:在设置了固定的窗口大小的同时,又设置了输入框和内边距(左边的大小),就没有很充足的空间给lable元素存放,所以就会到下一行去。
绝对布局会让大家忽略块的存在,相对布局不会让人忽略,固定布局会随着页面滚动而滚动,静态布局没有偏移量
错误:在使用表格布局时,增加iframe高度时,导航栏也会增加
相关的html------------------------------------------------------------------------------------------------------
<ul>
<li><a href="home.html" target="test">首页</a></li>
<li><a href="history.html" target="test">历史记录</a></li>
<li><a href="manage.html" target="test">用户管理</a></li>
<li><a href="manage.html" target="test">图表统计</a></li>
</ul>
</div>
<div class="tableCell" id="other">
<p><iframe src="home.html?wmode=opaque" name="test" class="Displayarea s" height="190%"></iframe></p>
</div>
CSS样式---------------------------------------------------------------------------------------------------
#other
{
background-color:#CCC;
width:80%;
height:490px;
text-align:center;
/*vertical-align:top;*/ //将这个注释取消就可以得到解决
margin:0px;
}
iframe
{
border-style:none;
background-color:#FFF;
width:100%;
overflow:visible;
height:500px;
margin:0px;
}
修改后:
但我想让iframe占满整个other块