状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以用 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 做一个向左的边界 这样就可以了
nächsten Abschnitt