一、案例如图
该案例设计条件:
左侧时间 和竖线、点、内容都是居中对其的,上下时间点中间要有一段距离
二、编写逻辑
布局结构:一共三个元素,左侧是时间和黑点,中间是线条,右侧是内容
样式难点:让子元素撑满父元素高度,通过给父元素 align-items: stretch;
如何让内容居中对其?
答:以左侧为例子,左侧高度为父元素高度,它里有开始时间、结束时间、黑点,只需要设置 justify-content: center;aligns-item:center;右侧同理
如何让线条line边长,让上下内容有一段距离?
答:只能单独设置一个div,让它的样式与 线的样式相同,有一个高度,用来隔开一段距离(暂时想到这个方法,有点麻烦)
三、代码案例(没时间一步一步去写如何思考的,太忙了,赶着开发)
html
<!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>
.father {
display: flex;
flex-direction: row;
align-items: stretch;
}
.son1 {
background-color: yellowgreen;
width: 4px;
padding: 60px 0; /* 通过padding 让线条变长,使上下模块产生距离 */
margin: 0 10px;
}
.son2 {
width: 200px;
background-color: #d3e3fd;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
position: relative;
left: 47px;
}
.time {
width: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.jianxi{
background-color: yellowgreen;
width: 4px;
margin: 0 10px;
height: 20px;
position: relative;
left: 40px;
}
</style>
</head>
<body>
<div class="father">
<div class="time">
<div>9:30</div>
<div class="circle"></div>
<div>9:45</div>
</div>
<div class="son1"></div>
<div class="son2">这是子元素son2,它里面有很多内容,可以撑起一个高度</div>
</div>
<div class="jianxi"></div>
<div class="father">
<div class="time">
<div>10:30</div>
<div class="circle"></div>
<div>10:45</div>
</div>
<div class="son1"></div>
<div class="son2">
这是子元素son2,它里面有很多内容,可以撑起一个高度,这是子元素son2,它里面有很多内容,可以撑起一个高度这是子元素son2,它里面有很多内容,可以撑起一个高度
</div>
</div>
</body>
</html>