CSS+DIV实现布局的常见三个问题-先飞电脑技术网

>> 本频道近100000余篇各类电脑技术、网络技术、软件技术、网页及平面设计等方面的电脑教程，我们的原则:不是精华拒不收录!

先飞电脑技术网 → 技术文章 → 网络编程 → CSS/HTML

CSS+DIV实现布局的常见三个问题

［作者：佚名转贴自：网络转载阅读次数：24 更新时间：2007-10-1 11:54:00 录入：刘光勇］

CSS+DIV实现布局的常见三个问题汇总：

如何让div居中
为需要居中的div增加样式：
margin-right: auto;
margin-left: auto;
同时还需要为此div所在的节点(例如body、div)增加样式：
text-align:center;
2、如何解决使用了float的div背景的延伸问题
在一个有背景的div中，放置使用float样式的div，那么底层的div的背景不会随着上层的float的div的高度而延伸。要解决这个问题就是需要在float的div下面放置一个取消float的div：
＜div style="clear:both;"＞＜/div＞
如何做出1px高的分隔线的效果
＜div style="height:1px;font-size:1px;background:#FF0000"＞＜/div＞
如果不加font-size:1px;在IE下会变得很宽。

注意：使用时需要将全角的“＜”“＞”替换为半角的“<”“>”。
三个问题的整体示例代码如下：

＜style＞
body{
    text-align:center;
}
＜/style＞
＜div style="width:200px;margin-right: auto;margin-left: auto;background:#FF0000"＞
container
＜div style="width:50px;height:200px;float:left;background:#CC0000"＞div1＜/div＞
＜div style="width:50px;height:200px;float:left;background:#990000"＞div2＜/div＞
＜div style="clear:both;"＞＜/div＞
＜/div＞
＜div style="clear:both;height:100px"＞＜/div＞

＜div style="width:100%;height:1px;font-size:1px;background:#FF0000"＞＜/div＞

【文章首页】【加入到收藏夹】【告诉好友】【打印此文】【关闭窗口】

·上一篇文章：不用float实现DIV模块居中布局 ·下一篇文章：没有了

【相关文章】

·CSS+DIV实现布局的常见三个问题[24]

·用CSS给网页图片添加滤镜效果[58]

·制作网页时CSS常用的十点技巧[50]

·CSS特点及加入网页的四种方法[87]

·CSS解决图片下面有空隙的简单方法[89]

【热门文章】

·CSS+DIV实现布局的常见三个问题[24]

·不用float实现DIV模块居中布局[16]

·DIV网页布局常用的方法与技巧[78]

·用CSS给网页图片添加滤镜效果[58]

·制作网页时CSS常用的十点技巧[50]

站内文章搜索：