您现在的位置是：网站首页> 编程资料编程资料

display:inline-block的使用示例display:inline-block的使用示例CSS属性display:inline-block用法深入理解display:inline-block的原理分析深入display:inline-blockdisplay:inline | block |inline-block-CSS教程-网页制作-网页教学网兼容性的 inline-block 属性

2021-09-07 954人已围观

简介 建立一个宽度很长的一个页面，里面包含许多列，外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，下面与大家分享下display:inline-block的使用示例

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

复制代码
代码如下:





















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

上一篇：css和jquery设置文字的显示和隐藏CSS文本超出指定宽度后隐藏并显示为省略号的实现方法利用css的样式对文本进行隐藏和显示等操作css样式显示省略号自定义宽度超过隐藏显示省略标记css样式的动态添加及显示和隐藏等零碎用法纯css3显示隐藏一个div特效的具体实现利用CSS3的checked伪类实现OL的隐藏显示的方法从A页面连接到B页面后并直接把B页面的隐藏层显示-CSS教程-网页制作-网CSS实现隐藏和显示功能的代码

下一篇：css3实现背景图片拉伸效果像桌面壁纸一样CSS3实现的全屏背景图片缩小渐变切换效果源码CSS的background属性及CSS3的背景图片设置总结jQuery+CSS3实现鼠标点击背景图片向上拉伸切换特效源码jquery+css3实现的网页背景图片固定内容切换特效源码CSS3对背景图片的裁剪及尺寸和位置的设定方法多重CSS背景动画实现方法示例css实现的鼠标悬停360度背景图片做动画旋转效果css3背景图片透明叠加属性cross-fade简介及用法实例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网