display:inline-block的使用示例

前端技术 2023/09/01 CSS
在实习中做专题时，遇到的一个问题：建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置float：left；不就行了 但是这个有一个问题，你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度，而实际中由于子页面中个数不定，因此外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，这不是我们所要的就比如下面的代码

复制代码
代码如下:

<!DOCTYPE HTML>
<html lang=\"en-US\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\" />
<title></title>
<link rel=\"stylesheet\" href=\"style.css\">
</head>
<style type=\"text/css\">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 600px;
background: #ccc;
border: 1px solid red;
}
.list{
width: 150px;
height: 300px;
background: blue;
float: left;
border: 1px solid green;
}
</style>
<body>
<div class=\"box\">
<div class=\"list\"></div>
<div class=\"list\"></div>
<div class=\"list\"></div>
<div class=\"list\"></div>
<div class=\"list\"></div>
</div>
</body>
</html>


可以 明显看到
 
后面的两个被挤到了下面的一行；
这时候可以使用display：inline-block
并将父级设置：white-spac：nowrap；
不够此时子div块之间会有一段空白
 
可以在父级中添加font-size:0;
 
即得到下面的图形

本文地址：https://www.stayed.cn/item/1328

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案