DIV横向布局小技巧

quanshiyinian · 发表于 2014-8-6 00:43:08

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

DIV横向布局小技巧

以前用position布局，老是出现问题，后面发现了横向布局的小方法，分享给大家！

<html>
<head>
<title>一种5个DIV并排在一行的方法</title>
<style type="text/css">
#bottom {
margin:0 auto;/*下边居是0 */
width:1000px;
height:600px;
}
#bottom div {
width:200px;
height:300px;
}
#d1 {
float:left;
background:#f00;
}
#d2 {
float:right;
background:#0f0;
}
#d3 {
float:right;
background:#00f;
}
#d4 {
float:right;
background:#00f;
}
#d5 {
float:right;
background:#00f;
}
</style>
</head>
<body>
<div id="bottom">
<div id="d3">d3</div>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</div>
</body>
</html>

复制代码

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！

网页学习者 · 发表于 2014-10-1 22:24:49

发个学习笔记看下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>首页布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
#container{
width:1002px;
background:gray;
}
#header{
height:120px;
background:orange;
}
#main{
height:600px;
background:green;
}
#iside{
width:700px;
float:left;
height:600px;
background:pink;
}
#rside{
width:302px;
float:right;
height:600px;
background:purple;
}
#footer{
height:120px;
background:blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="iside"></div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

复制代码

大家，在完成div布局的时候，一定要设置iside 和rside的浮动这2个的关系，float的设置一定要清晰。之后才能够，把div id="footer"才能够清晰，而且一定要把 div id="iside"和 div id="rside"所在的父亲层div id="main"里面设置高度否则 div id="footer"在前个设置了float的时候，他会扶起来的。这点要注意！