div探索系列（二）：让多个div显示在一行（浮动的div）

时间：2024-03-07 07:32:27

一个div占据一行，怎样实现布局中2个并列的div呢？本节将解决这个问题
（一）floate属性可以使多个块状元素并列一行。
      对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行.
（二）floate属性值有如下取值
(1)left:块状元素向左移动
(2)right:块状元素向右移动
(3)none:块状元素不会浮动
(4)inherit:继承父容器的值
（三）实例演示

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">

*{margin:0px;
padding:0px;
}
#one {
     width: 125px;
    background-color: #eee;
    height: 120px;    
    border: 1px solid #000000;
    float:left;     
}
#two {
    width: 200px;
    background-color: #eee;
    height: 120px;    
    border: 1px solid #000000;
    
    
}

</style>
</head>

<body>
<div id="one">第一div</div>
<div id="two">第二个div</div>
</body>
</html>

 

无标题文档

第一div
第二个div

相关文章