HTML+CSS 轻松入门之浮动模型
状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动
下面我们来写一个浮动的实例，代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
}
#dv2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>以上代码是块状元素div 独占一行，现在我们要把他们放在一行显示，然后俩个div之间又点距离，请看下面代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background:red;
float:left;
margin-left:5px; /*调节俩个div之间的距离*/
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>这样我们想要的效果就完成了，首先我们要给第一个div 做一个向左的浮动，第二个也是，然后俩个就会链接在一起，在同一行展示
接下来我们给第二个div 做一个向左的边界 这样就可以了
我又来了
懂了，也很简单啊
7年前 添加回复 0