表头对齐
- 如果div中只有一个内联元素，那么div的高度就是这个内联元素所在行的行高。
- 如果有一个单词（字）很长很长，超出盒子，但是又不想让他自动换行，就可以直接使用下面的代码，让该字恢复正常，即和正常文档流一样，该什么时候换行就什么时候换行：
文档流：内联元素从左到右，块级元素从上到下
word-break:break-all 多行自动切断并换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表头对齐</title>
<style>
div{
border: 1px solid red;
font-size: 20px;
}
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>
结果演示
布局技巧
- float
- 儿子全加 float: left （right）
- 老子加 .clearfix
- 定宽定高
- flex
- 老子加 display: flex
- 老子加 justify-content: space-between;
- 弹性宽度
如果宽度不够，可以用 margin: 0 -4px;
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
<a href=’javascript:;’>阻止链接跳转
