给div使用display:inline-block产生的问题

SKYZACK 发布于2019-08-05 18:07 / 2350人阅读

摘要：使用产生的问题给两个设置了，也控制了两个的长度，但两个不在同一行案例部分部分结果是这样子的解决方案在父元素中添加即可使得两元素同行需要在子元素中重新设置的结果问题解决如果两者在同一行，但却不对齐的话给两个设置即可

使用display:inline-block产生的问题

给两个div设置了display:inline-block，也控制了两个div的长度，但两个div不在同一行
案例：

    ---div部分---
    
        
        
    
    
    ---css部分---
     #div0{
            width: 300px ;
            height: 300px ;
            background: burlywood ;
          
        }

        #div1{
            width: 150px ;
            height: 150px ;
            display: inline-block;
            background: orange ;
        }

        #div2{
            width: 150px ;
            height: 150px ;
            display: inline-block;
            background: skyblue ;
        }

结果是这样子的：

解决方案：
在父元素div0中添加 font-size：0 即可使得两元素同行(需要在子元素中重新设置font-size的font-size)

        #div0{
            width: 300px ;
            height: 300px ;
            background: burlywood ;
            font-size: 0 ;   
        }

结果：

问题解决

如果两者在同一行，但却不对齐的话给两个div设置 vertical-align:top 即可

混合云 idc机房托管 js给div加图片使用ecs公网ip压测会产生流量费用吗 div标签中使用js linux的产生

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60553.html

inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

learn_shifeng 2019-08-28 18:30 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

binaryTree 2019-08-01 15:01 评论0 收藏0
基于inline-block进行自适应列表布局

摘要：代码如下为省略的其他属性内容直接让块元素设置为内联对象呈递设置属性，然后触发块元素的如或属性等。需求无论是电商网站展示商品列表还是个人博客展示文章列表，或者是社交站点展示好友列表，往往会遇到自适应列表布局的需求，本文介绍一种使用inline-block布局的方法。 block,inline和inlinke-block细节对比 ● display:block a. block元素...

Cheriselalala 2019-08-30 14:03 评论0 收藏0
BFC的一些探究

摘要：它是用于决定盒子的布局及浮动相互影响范围的一个区域。小白反思如果世界的运行都有自我运行的一套机制，那么的世界必然有自己的一套规则。外边距合并当时在回答外边距的问题时，总结出了合并的一条规则必须相邻。最初的梦了解BFC后，能够更深入的明白外边距合并原理。了解BFC后，能够更深入的明白浮动的行为。了解BFC后，知识就是你的，总不会吃亏对吧？哈哈之前有两篇文章《行内元素的一些探索》、《...

curlyCheng 2019-08-30 12:44 评论0 收藏0
CSS的inline、block与inline-block

摘要：基本知识点行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。行内元素去除了之间的莫名空白。当为行内元素进行定位时，与都会使得原先的行内元素变为块级元素。且的是不占空间的。基本知识点行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。块级元素(block)：独占一行，对宽高...

elva 2019-08-29 15:38 评论0 收藏0