1 代码 :链接描述
2 说明:
代码:
为了使大家更星期一)上迎大家届时参加。
一、 应吉尔吉斯共和坦进行正式访问并出十五次
.p1 {
width: 200px;;
height: 100px;
background-color: #0d8ba1;
float: left;
}
.word {
background-color: #0e8f7c;
width: 200px;
height:200px;
color: red;
font-size: 20px;
display: inline-block;
border: 1px solid red;
}
-------------------------------
补充说明: .word {
background-color: #0e8f7c;
width: 200px;
height:200px;
color: red;
font-size: 20px;
display: inline-block;
border: 1px solid red;
}
前两个p的样式被设置为word样式,并且注意到p的display被设置为inline-block,
3 问题:
(1)为什么显示效果不会如下图
(2)为什么不会如下显示:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
空白的原因是因为
.word没有设置vertical-align属性的话默认是baseline。对齐方式默认为父元素的基线。如果
.word内的字的行数是一样的,自然是对齐的。或者设置
.word的vertical-align为top,bottom,middle也可以对齐。至于为什么不会如下显示,是因为奇葩的
float虽然脱离正常的文档流,但其实还是占据内容的。元素浮动后其他浮动元素,文本或者行内元素围绕它安放。
设置了
inline-block属性的.word具有inline的特性,自然出现在浮动元素的右方。楼上给出了正确答案