html, body, #container { height: 100%; width: 100%; } .content-window-card { position: relative; box-shadow: none; bottom: 0; left: 0; width: auto; padding: 0; } .content-window-card p { height: 2rem; } .custom-info { border: solid 1px silver; } div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; } div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; } div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s; } div.info-top img:hover { box-shadow: 0px 0px 5px #000; } div.info-middle { font-size: 12px; padding: 10px 6px; line-height: 20px; display: flex; } div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center; } div.info-bottom img { position: relative; z-index: 104; } span { margin-left: 5px; font-size: 11px; } .info-middle img { float: left; margin-right: 6px; } /*横向时间轴*/ .time-horizontal { list-style-type: none; border-top: 1px solid #707070; max-width: 800px; padding: 0px; margin: 30px; } .time-horizontal li { float: left; position: relative; text-align: center; width: 33%; padding-top: 10px; } .time-horizontal li b { content: ''; position: absolute; top: -10px; left: 47%; width: 12px; height: 12px; border: 2px solid #4c4c4c; border-radius: 8px; background: #4c4c4c; } .active{ background: #98FB98 !important; } /*纵向时间轴*/ .time-vertical { list-style-type: none; border-left: 1px solid #707070; padding: 0px; height: 400px; } .time-vertical li { height: 100px; position: relative; } .time-vertical li a { display: inline-block; margin-left: 20px; margin-top: 15px; text-decoration: none; color: #000; } .time-vertical li b:before { content: ''; position: absolute; top: 15px; left: -12px; width: 18px; height: 18px; border: 2px solid #98FB98; border-radius: 10px; background: #98FB98; } .time-vertical li span { position: absolute; color: #fff; top: 18px; left: -6px; }