display:inline-block的使用示例
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
在实习中做专题时，遇到的一个问题：建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置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;
即得到下面的图形
复制代码代码如下:
<!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;
即得到下面的图形
下一篇：css和jquery设置文字的显示和隐藏