码迷,mamicode.com
首页 > 其他好文 > 详细

inline-block,一个奇怪的问题:中间div掉下来

时间:2018-09-21 12:26:13      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:src   一个   back   style   title   red   分享   样式   bsp   

先上代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html body {
            padding: 0;
            margin: 0
        }
    </style>
</head>

<body>

    <div >
        <div style="width: 30%;background:blue;height: 500px;display: inline-block;font-size: 15px"></div>
        <div style="width:30%;;height: 500px;background: green;display: inline-block;font-size: 15px; ">
            
        </div>
        <div style="width:30%;background: red;height: 500px;display: inline-block;font-size: 15px"></div>

    </div>
</body>

</html>

 

运行后效果如下:

 

技术分享图片

图上可以看出,这里存在两个问题:1、div之间有间隙  2、如果在中间添加内容,会出现诡异效果:

 

技术分享图片

 

怎么解决?

1、解决间隙,把父元素的font-size的设置为0

2、把加内容的的div增加样式:vertical-align:top

 

技术分享图片

 

注意:不要忘了把中间div加font-size:15px

inline-block,一个奇怪的问题:中间div掉下来

标签:src   一个   back   style   title   red   分享   样式   bsp   

原文地址:https://www.cnblogs.com/ww01/p/9685870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!