CSS的浮动效果

               

在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。下面

来看一下效果。

先看一下Div的向右浮动效果

HTML代码如下

<!DOCTYPE html><html>  <head>    <title>css的浮动效果</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">      <link rel="stylesheet" href="../css/myFloat.css" type="text/css"></link>  </head>    <body>   <div class="div3">    <div id="div2" class="div1">div1</div>    <div id="div2" class="div1">div2</div>    <div id="div2" class="div1">div3</div>    </div>  </body></html>

CSS代码如下

bodymargin: 0pxpadding: 0px;}.div1background-color: pink; width: 150pxheight: 100pxborder: 1px solid blue; margin-top: 5pxmargin-left: 5px;}#div2float: left;/*右浮动是指让她尽量向右浮动,直到父元素的右边界*/}.div3width: 800pxheight: 400pxborder: 1px solid blue;}

效果如图



           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/qq_43679366/article/details/86903629