- 如果 div 里 只有一个/（多个）内联元素，那么 div 的高度由行高（line-height）/（加起来）决定。跟字体大小（font-size）无关。
- 文字两端对齐用：【text-align:justify】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
border:1px solid red;
}
span{
border:1px solid green;
display:inline-block;
width:5em;
text-align:justify;
line-height:20px;
overflow:hidden;
height:20px;
}
span::after{
content:'';
display:inline-block;
width:100%;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
</body>
</html>
text-align:justify
span::after{
content:'';
display:inline-block;
width:100%;
border:1px solid blue;
}
text-align:justify只有在多行的时候，才起作用，因为它是让多行文字两端对齐。上述代码就是 【创造一个空的行】放在下面，用来和【上面的span对齐】。
-
浮动+清除浮动【clearfix::after】
.clearfix::after
class="clearfix"
.clearfix::after{
content:'' ;
display:block;
clear:both;
}
网友评论