html 实现DIV+CSS 让左右内容之间保持一定距离

内容摘要
这篇文章主要为大家详细介绍了html 实现DIV+CSS 让左右内容之间保持一定距离，具有一定的参考价值，可以用来参考一下。

一般我们在一个外围DIV内针对两个DIV分别使用float浮动
文章正文

这篇文章主要为大家详细介绍了html 实现DIV+CSS 让左右内容之间保持一定距离，具有一定的参考价值，可以用来参考一下。

一般我们在一个外围DIV内针对两个DIV分别使用float浮动属性（float:left（局左）、float:right（居右））来解决此问题。

这样的布局一般总的宽度一定，只需左、右内容DIV宽度设置小于总宽度即可实现，

注意的是一个DIV的宽度计算公式是：自己设置宽度+边框宽度（border）+padding宽度+margin宽度组成。

左右DIV的距离为：外围DIV宽度-左边DIV宽度-右边DIV宽度

提示：在DIV CSS制作中很多时候需要计算的如这样的布局。

效果如图所示：

经测试代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<code class="html">
<!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>
 
 
<!--***   代码来自 php教程 （www.idcnote.com）***--></code>

分别计算出Box-a和Box-b的宽度后，可得Box-a与Box-b之间的宽度为200-57-127=16px.

注：关于html 实现DIV+CSS 让左右内容之间保持一定距离的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇php 登陆验证类功能实例下一篇php 自动生成密码的实现方法

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！