一、元素显示模式
- 块元素
- 行内元素
- 行内块元素
二、问题显示
这两个盒子的位置相错，需要将这两个行内块元素顶部对齐且彼此紧靠。
三、解决方法
目标样式为：
解决方式有两种：
第一种：在<div>样式中添加vertical-align:top;
div {
vertical-align: top;
}第二种：利用浮动改变标准流
.one {
float: left;
width: 100px;
height: 100px;
background-color: pink;
display: inline-block;
}
.two {
float: left;
display: inline-block;
width: 300px;
height: 50px;
background-color: black;
}完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
float: left;
width: 100px;
height: 100px;
background-color: pink;
display: inline-block;
}
.two {
float: left;
display: inline-block;
width: 300px;
height: 50px;
background-color: black;
}
div {
vertical-align: top;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
扫一扫
1285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
