.topcontent{ width:100%; position: relative; margin-top:100px; } .topcontent img{ width:100%; } .titleContent{ position:absolute; top:50%; left:14%; } .titleContent .title{ font-size: 48px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; text-shadow: 0px 2px 6px rgba(9,30,52,0.22); } .titleContent .subtitle{ font-size: 36px; font-family: Arial; font-weight: 400; color: #FFFFFF; } .leftcontent>img{ width:100%; height: 350px; } .details{ padding:20px 20px 40px 20px; background: #F8F8F8; } .contentContainer{ margin-top:70px; } .toptitle{ display: flex; justify-content: space-between; } .details .toptitle h5{ display: flex; align-items: center; } .toptitle span{ font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #999999; line-height: 35px; } .details .toptitle h5 a{ font-size: 16px; font-family: Microsoft YaHei; color: #124AA0; font-weight: bold; } .details .toptitle h5 img{ width:20px; height:17px; margin-left:11px; } .details p{ padding:0; margin:0; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; margin-top:24px; } .more{ display: flex; align-items: center; margin-top:55px; } .more a{ font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #124AA0 !important; } .more img{ width:8px; height:14px; /* margin-left:11px; */ margin-left: 13%; position: absolute; } .items{ display: flex; align-items: stretch; position: relative; background: #FFFFFF; border: 1px solid #EAEAEA; margin-bottom:10px; /* flex: 1; */ width: 100%; height: 150px; } .itemcontainer{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; } .itemcontainer>:last-child{ margin-bottom:0px; } .items .left{ width:190px; height:100%; } .items .left img{ width:100%; height:100%; } .items .right{ flex:1; margin-left:10px; padding:9px; display: flex; flex-direction:column; } .right a{ font-size: 16px; font-family: Microsoft YaHei; color: #222222 !important; font-weight: bold; line-height: 20px; width: 88%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .right .time{ font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #999999; margin:16px 0; } .right p{ margin:0; padding:0; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #999999; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } .zhiding{ position:absolute; right:8px; top:10px; background: red; border-radius: 2px; font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #fff; padding:5px 10px; }