display:inline-block的使用示例

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

在实习中做专题时，遇到的一个问题建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置floatleft；不就行了这个有一个问题，你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度，而实际中由于子页面中个数不定，因面的div块的宽度不能确定，若是外面的div块的宽度不够就会导致部分子div块移动到狼蚁网站SEO优化的一行，这不是我们所要的就比如狼蚁网站SEO优化的代码

复制代码

代码如下:

<!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: #c;
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>

可以明显看到

后面的两个被挤到了狼蚁网站SEO优化的一行；
这时候可以使用displayinline-block
并将父级设置white-spacnowrap；
不够此时子div块之间会有一段空白

可以在父级中添加font-size:0;

即得到狼蚁网站SEO优化的图形

上一篇：css3实现背景图片拉伸效果像桌面壁纸一样下一篇：css和jquery设置文字的显示和隐藏

display:inline-block的使用示例

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

display:inline-block的使用示例

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设