2 adorablewowser AdorableWowser 于 2015.07.21 12:29 提问

在display:inline-block的里的div里插入p标签,导致div下移。

效果图片

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,div,p{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 200px;
            height: 50px;
            background-color: #66ccff;
            text-align: center;
        }
        .div2{
            width: 80px;
            height: 50px;
            background-color: #cc0000;
            display: inline-block;
        }
        .p1{
            width: 80px;
            text-align: center;
            font-size: 15px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">

        </div>
        <div class="div2">
        <p class="p1">哈哈哈</p>
    </div>
    </div>
</body>
</html>

在.div2的CSS里加入{overflow:hidden;}可以解决安卓设备的chrome和PC上的浏览器,但是在苹果手机的浏览器里依旧没解决。

3个回答

xzlLover
xzlLover   2015.07.21 13:44
已采纳

图片说明 改成这样试一下

xzlLover
xzlLover 回复AdorableWowser: 其实不用那个空的div也是可以的。。之前你写的div2 写了两个。。属性设置重复才会有了那种效果
2 年多之前 回复
AdorableWowser
AdorableWowser 试着,改了下,可以了。能简要的告诉下原因吗?为什么外面套个空的DIV就好了?谢谢啦
2 年多之前 回复
CSDNXIAOD
CSDNXIAOD   2015.07.21 12:32
xzlLover
xzlLover   2015.07.21 13:42

你把第一个div2改成div3,然后把第一个 放到

标签的下面。。然后你再试试。。div3不做设置

Csdn user default icon
上传中...
上传图片
插入图片