您的位置：首页 > Web前端 > CSS

css中的div布局之巧用div

2016-03-20 16:52 525 查看

作为一个前端学习的新手，学习css这块内容还是挺吃力的，所以经常去看看视频，对自己快速掌握很有帮助，今天看到一个很不错的案例。

新手在页面布局时往往很依赖div来分割页面，例如下面这个页面：

这是一个聊天的页面，页面有头像，ID，聊天内容以及时间。看到这个页面我的第一思路是用三个div来进行操作。首先一个大的div，在大的div中分左右两个子div，然后在左div中添加图片，右边的div中添加文本信息。代码如下：

<!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=utf-8" />
<title>talk</title>
<style type="text/css">
body{margin:0; padding:0;}
.demo1{width:620px; position:relative; overflow:hidden}
.demo1 .left{width:100px; float:left}
.demo1 .left img{margin-left:20px; }
.demo1 .right{width:458px; padding:20px; float:right; background: #07c; border: #999 1px}
.demo1 .right p{ line-height:25px; font-size:16px;}
.demo1 .right span{ position:absolute; top:20px; right:20px;
font-size:15px}

<body>
<div class="demo1">
<div class="left">
<img src="../../../picture/头像.png" width="80" height="100" /> </div>

<div class="right">

<h3>大智若愚</h3>
<p>上周，Mozilla已于全球发布了Firefox OS 2.5版本，同时发布了早期的测试版本——Firefox OS 2.5开发者预览版（Developer Preview）App，可供开发者下载至 Android设备上一睹为快。目前最新版本的Firefox OS提供以下功能：
·       附加组件：如同大家在PC桌面版浏览器所爱用的附加组件（Add-on），Firefox OS附加组件现可扩增为单一App、多个App，甚至可作为系统App。
·       隐私浏览模式搭配追踪保护（Tracking Protection）功能：追踪保护为Firefox的隐私新功能，让用户可跨多个网站控制本身浏览活动受到追踪的方式。
·</p>
<span>18分钟前</span>
</div>
</div>
</body>
</html>

overflow:hidden

这一句很关键，它可以解决float带来的缺陷，float不仅可以水平浮动，还可以立体浮动，overflow：hidden清除了浮动，保证了格式的正确。

但是三个div对于这个页面来说，没有必要，可以缩减为两个div，将左边的div去掉，样式表：

.demo2{width:620px; position:relative; overflow:hidden}
.demo2 img{float:left; margin-left:20px}
.demo2 .right{width:458px; padding:20px; float:right; background: #07c; border: #999 1px}
.demo2 .right p{ line-height:25px; font-size:16px;}
.demo2 .right span{ position:absolute; top:20px; right:20px;
font-size:15px}

主体为：

<div class="demo2">
<img src="../../../picture/头像.png" width="80" height="100" />

<div class="right">

<h3>大智若愚</h3>
<p>上周，Mozilla已于全球发布了Firefox OS 2.5版本，同时发布了早期的测试版本——Firefox OS 2.5开发者预览版（Developer Preview）App，可供开发者下载至 Android设备上一睹为快。目前最新版本的Firefox OS提供以下功能：
·       附加组件：如同大家在PC桌面版浏览器所爱用的附加组件（Add-on），Firefox OS附加组件现可扩增为单一App、多个App，甚至可作为系统App。
·       隐私浏览模式搭配追踪保护（Tracking Protection）功能：追踪保护为Firefox的隐私新功能，让用户可跨多个网站控制本身浏览活动受到追踪的方式。
·</p>
<span>18分钟前</span>
</div>
</div>

这样减少了div的使用，还完全实现了功能。

其实我们还可以进一步优化代码，再减少一个div，样式表为：

.demo3{width:458px; padding:20px; background: #07c; border: #999 1px; margin-left:120px; position:relative}
.demo3 img{float:left; margin:-20px 0 0 -120px}
.demo3 p{ line-height:25px; font-size:16px;}
.demo3 span{ position:absolute; top:20px; right:20px;}

主体为：

<div class="demo3">
<img src="../../../picture/头像.png" width="80" height="100" />
<h3>大智若愚</h3>
<p>上周，Mozilla已于全球发布了Firefox OS 2.5版本，同时发布了早期的测试版本——Firefox OS 2.5开发者预览版（Developer Preview）App，可供开发者下载至 Android设备上一睹为快。目前最新版本的Firefox OS提供以下功能：
·       附加组件：如同大家在PC桌面版浏览器所爱用的附加组件（Add-on），Firefox OS附加组件现可扩增为单一App、多个App，甚至可作为系统App。
·       隐私浏览模式搭配追踪保护（Tracking Protection）功能：追踪保护为Firefox的隐私新功能，让用户可跨多个网站控制本身浏览活动受到追踪的方式。
</p>
<span>18分钟前</span>
</div>

这样就把原来的三个div缩减为一个div，优化了代码。这里不得不提到这一句：

.demo3 img{float:left; margin:-20px 0 0 -120px}

margin的值是负的，可以实现图片移出边框。

三个代码效果都一样：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航