一般我们在一个外围DIV内针对两个DIV分别使用float 浮动属性(float:left(局左)、float:right(居右))来解决此问题。
这样的布局一般总的宽度一定,只需左、右内容DIV宽度设置小于总宽度即可实现,
注意的是一个DIV的宽度计算公式是:自己设置宽度+边框宽度(border)+padding宽度+margin宽度组成。
左右DIV的距离为:外围DIV宽度-左边DIV宽度-右边DIV宽度
提示:在DIV CSS制作中很多时候需要计算的如这样的布局。
效果如图所示:
<!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>
<style type=text/css>
<!--页面内容距离浏览器顶端及左边空隙为0-->
html,body {
margin: 0;
padding: 0;
}
#Box{
width:200px;
height:72px;
background-color:#666;
}
<!--Box-a的宽度为50+5(margin-left)+2(左右border宽度和)=57-->
#Box-a{
float:left;
width:50px;
border:1px solid #999;
height:60px;
background-color:#00F;
margin-left:5px;
margin-bottom:5px;
margin-top:5px;
}
<!--Box-b的宽度为120+5(margin-right)+2(左右border宽度和)=127-->
#Box-b{
float:right;
width:120px;
border:1px solid #999;
height:60px;
background-color:#F03;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
}
</style>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>DIV+CSS 让左右结构内容之间有一定距离</title>
</head>
<body>
<!--外围的DIV-->
<div id=Box>
<div id=Box-a></div><!--左边的DIV-->
<div id=Box-b></div><!--右边的DIV-->
</div>
</body>
</html>
<!--*** 代码来自 编程之家 jb51.cc (jb51.cc)***-->
分别计算出Box-a和Box-b的宽度后,可得Box-a与Box-b之间的宽度为200-57-127=16px.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。