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 写了两个。。属性设置重复才会有了那种效果
接近 3 年之前 回复
AdorableWowser
AdorableWowser 试着,改了下,可以了。能简要的告诉下原因吗?为什么外面套个空的DIV就好了?谢谢啦
接近 3 年之前 回复
CSDNXIAOD
CSDNXIAOD   2015.07.21 12:32
xzlLover
xzlLover   2015.07.21 13:42

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

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
在display:inline-block的div中写入文本导致div脱离文档流
当在一个display属性为inline-block的div中放置文本时,会导致该div脱离原本的文档流,其原因是有些游览器对于display:none属性的容器会自动设置其vertical,使改div的文字与并列的div底部对齐,经过尝试,可以重新设置其vertical,即设置vertical:top。
“display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
在开始用display:inline-block的时候,只知道有baseline这么一说,而且当时记笔记解决了空隙问题,百度一堆文章,什么终极解决办法等等,还记录了一些问题,当时不明白,到今天才明白verticle-align的用法,原来可以这么用,以后可以随便玩inline-block,还有CSS hack,还有UC浏览器,这几天写的进哥的嘿凤梨首页在手机UC直接换行了,可能是间隙问题。。。bu
DIV 设置 display:inline-block 导致 DIV 对不齐的解决方法
情景代码如上。 出问题的浏览器: 360,sogou,猎豹的极速模式 给DIV设置display:inline-block属性后,这四个DIV会拍在一排,但是会个别的高一点,不对齐。 解决方法: 给div设置vertical-align:top vertical-align:top"> vertical-align:top"> vertical-align:top"> ver
关于div的设置:display:inline-block出现div对不齐的情况处理方法·
多个并列div设置display:inline-block的时候 某些浏览器会出现:其中某一个div比其他的高或者和低的情况 解决办法为:为每个div加上vertical-align:top的属性
inline-block之后意外发现块下沉
前几天面试某M公司的前端开发,被虐了一通之后,发现自己的前端学的真是一塌糊涂,总结一下各个问题,发现前端之路漫漫,还需潜心修行。 在网上查找关于浏览器兼容的问题,几乎每一篇都提到了inline-block的问题。自己动手测试了一下,发现了一个意外的现象——当设置块元素display:inline-block之后,如果某些块写了文字,某些不写,写了文字的就会下沉,但如果都不写或者都写了,就不会出现
inline-block和block元素水平居中显示
http://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html 一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,即display:block,一种是行内元素display:inline-block; 块级元素包括div,ul,p,以及所有的h类标签。行内元素又叫内联元素,a,img,input是最常见的。
去除inline-block元素间间距,比较靠谱的两种办法
1.使用注释符号1 <div><span class="1">1</span></div><!-- 2 --><div><span class="2">2</span></div><!-- 3 --><div><span class="3">3</span></div><!-- 4 --><div><span class="4">4</span></div>楼主对代码
DIV 设置 display:inline-block 导致 DIV 对不齐的解决方法
1.将div的样式中加上,vertical-align:top; 2将inine-block改为inline-table
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如下所示:那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题。
css中display:inline-block错位问题
就目前来说,常用的布局方式有table、div,因为使用table都是比较规整、传统的布局方式,现在大部分网页为了美观,大多使用div进行布局,使用div布局就避免不了对块级元素的布局调整,在仿作百度日历的时候我发现,在使用两个同级div进行布局的时候,使两个div并排,常用的方法有:position定位、float:left、display:inline-block。而问题就出现在,我在使用di