inline-block和float的区别

hxy 2020-07-17 PM 128℃ 0条 访问: 129 次

正常状态下的div(block)

代码:

<style>
 #demo 
 {
width: 500px;
height: 200px;
border: 1px solid #000;
 }
 #demo div
 {
height: 50px;
width: 150px;
  }

 #demo div:nth-of-type(1) 
{
background-color: red;
}

  #demo div:nth-of-type(2) {
background-color: blue;
}

  #demo div:nth-of-type(3) {
background-color: green;
  }
</style>
<body>
  <div id="demo">
<div>1</div>
<div>2</div>
<div>3</div>
 </div>
</body>

图:https://img.hxyxyz.top:444/images/2020/07/17/51.png

div使用inline-block

图:
https://img.hxyxyz.top:444/images/2020/07/17/52.png

这里使用inline-block 会导致div变为行内块元素,在一行排列,但每个div之间有间隔。

div使用float(left)

图:
https://img.hxyxyz.top:444/images/2020/07/17/53.png

这里使用了float:left,会发现div也像块状元素那样在一行排列,但每个div之间没有间隔。

标签: none

非特殊说明,本博所有文章均为博主原创。

评论啦~