为什么给<p>元素外面套一个<div>会导致<p>元素的内容从横向变竖 - html吧

level 2

廉价喵楼主

球球大佬看看……谢谢大佬们！
我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
h2
{
position:absolute;
left:50px;
top:50px;
}
div
{
position:absolute;
left:20px;
top:10px;
}
</style>
</head>

<body>
<div>
<h2>这是一个绝对位置的标题</h2>
</div>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>

2021年04月10日 02点04分 1

level 2

廉价喵楼主

尴尬，一个不小心把图片插到代码里面了

2021年04月10日 02点04分 2

level 8

周存存

因为这些没有指定宽度,现在div和h2的宽度是0，h2被迫这样排版。
如果你给div一个overflow: hidden，你会发现内容完全消失了。
考虑去掉h2的position: absolute属性。

2021年04月12日 10点04分 3

level 7

辰航咨询

第一<P> 是一个行类元素标签，只要不给设置外部空间大小或敲回车，它会一直延伸，
第二因为你没有给<div> 设置空间大小（宽w和高h），当<p>字符超过系统默认的<div>大小，自动下移一行

2021年04月13日 03点04分 4

level 2

廉价喵楼主

看了楼上两位大佬的回复，原来是<div>没有默认宽度的话，<h2>的绝对定位点在<div>外面，每一个字就被挤下去了，谢谢大佬！！
本来<div>没有设定宽度，默认是0，
如果子元素<h2>的定位方式没有指定，那他就是一个正常的文档流，会“撑开”外面的<div>盒子，修改<div>的宽度
如果子元素<h2>的定位方式指定为绝对定位，那他就不在文档流中，<div>的宽度还是默认的0，所以会把<h2>挤成竖列！

2021年04月13日 16点04分 5