css怎么分四格 |ie8 css font

/* 1. 首先大家需要定义一个外层容器，用于承载四个格子 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 2. 然后定义四个内部格子，使用百分比定位方式，使其合理分布在外层容器中 */
.box {
position: relative;
width: 45%; /* 两个格子的宽度 */
height: 200px; /* 格子高度 */
}
/* 3. 再定义内部阴影效果 */
.box::before,
.box::after {
content: "";
position: absolute;
z-index: -1;
}
.box::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
box-shadow: inset 6px 6px 6px rgba(0,0,0,0.5);
}
.box::after {
top: -10px;
left: -10px;
right: 10px;
bottom: 10px;
box-shadow: inset -6px -6px 6px rgba(255,255,255,0.5);
}

执行完以上步骤后，你就可以成功地把一个容器分成四个格子了。