您当前位置：首页 > web前端 > htmlcss > CSS基础教程：两列布局的实例代码

CSS基础教程：两列布局的实例代码

来源：程序员人生发布时间：2014-02-18 20:42:58 阅读次数：3340次

　　网(LieHuo.Net)教程 css作为今天网页制作的主要语言，已经成为每个站长必学的东西，如果您还不会css，还在用dw制作table的网页，那么您的网站就可能无法得到有效的seo和其它性能优化，从而丢掉市场。今天网小编给大家推荐一篇基础教程，每位站长都可以看的懂，高手请飘过。

　　先看css部分：

以下为引用的内容：
#wrap {
border:1px solid blue;
margin:0 auto;
overflow:hidden; /* 这里加上 overflow 属性，就可以不用添加清除浮动的代码了,使父容器能够包含住子层。 */
width:950px; /* 这里的宽度也要设置，而不要使用浏览器默认的自适应宽度100% */
}
#content {
border:1px solid #C3CFEA;
float:left;
margin:10px 0;
overflow:hidden;
padding:10px 10px 15px; /* 注意这里的padding 设置 */
width:680px; /* 注意这儿的宽度，只是指层的内容区(content)的宽度。实际宽度为 680px + 10px(右补白) + 10px (左补白) + 1px (右边框) + 1px(左边框) = 702 px; */
}
#sidebar {
border:1px solid #FF0000;
color:#FF0000;
float:right;
margin:10px 0;
overflow:hidden;
padding:0 10px 20px;
width:220px; /*实际宽度为 220px + 10px + 10px + 1 + 1 = 242px */
}

　　上述css在HTML中的使用：

以下为引用的内容：
<div id="wrap">
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
</div>

　　注意上面各层的宽度设置：242px + 702px = 944px < 950px 这个条件一定要满足。

　　再看演示：

<html><head><title>网LIEHUO.NET,关注站长,建设互联网！</title></head><style>#wrap {border:1px solid blue;margin:0 auto;overflow:hidden; /* 这里加上 overflow 属性，就可以不用添加清除浮动的代码了,使父容器能够包含住子层。 */width:950px; /* 这里的宽度也要设置，而不要使用浏览器默认的自适应宽度100% */}#content {border:1px solid #C3CFEA;float:left;margin:10px 0;overflow:hidden;padding:10px 10px 15px; /* 注意这里的padding 设置 */width:680px; /* 注意这儿的宽度，只是指层的内容区(content)的宽度。实际宽度为 680px + 10px(右补白) + 10px (左补白) + 1px (右边框) + 1px(左边框) = 702 px; */}#sidebar {border:1px solid #FF0000;color:#FF0000;float:right;margin:10px 0;overflow:hidden;padding:0 10px 20px;width:220px; /*实际宽度为 220px + 10px + 10px + 1 + 1 = 242px */}</style><div id="wrap"><div id="content">content</div><div id="sidebar">sidebar</div></div></body></html>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 sybase常用指令

下一篇 跨域资源共享的10种方式

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点