.leader-content{ /* padding: 0 40px; */ margin-top: 0px; width: 83%; } .leader-inner-content{ display: block; margin: 0 auto; width: 100%; margin-left: 30px; } .leader-button{ display: flex; display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; justify-content: center; } .leader-button-content{ /* display: block; */ margin-bottom: 30px; width: 100%; } .leader-button p{ color: black; font-size: 18px; padding: 16px 30px; background: #EEEEEE; } .leader-button>a>.leader-button-active{ color: white; background-color: #814487; } .leader-card{ display: block; margin: auto; /* flex-direction: column; */ /* align-items: center; */ /* justify-content: space-around; */ margin-bottom: 40px; } .leader-card a{ width: 90%; margin: auto; max-width: 650px; display: block; } @media only screen and (min-width: 1200px) { .leader-card a { width: 45%; margin-left: 20px; float: left; height: 222px; } } .leader-card-content{ display: flex; display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; margin: auto; margin-bottom: 30px; justify-content: center; background-color: #EEEEEE; } .leader-card-content img{ width:150px; min-width:150px; height:180px; } .leader-card-message{ background-color: #EEEEEE; padding: 40px 30px 20px 40px; width:calc(100% - 150px); } .leader-card-name{ font-size: 22px; color: #814487; margin-bottom: 18px; float: left; } .leader-card-job{ font-size: 16px; padding: 8px; padding-left: 0; color: #333333; float:left; margin-left:20px; margin-top:-4px; } .leader-card-respon{ display: flex; display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; font-size: 14px; color: #333333; width:100%; } .leader-card-respon p{line-height: 24px;} .leader-button a{ display: block; } @media only screen and (max-width: 1200px) { .leader-card { margin-bottom: 70px; } } @media only screen and (max-width: 768px) { .leader-card { margin-bottom: 50px!important; } .leader-content { width: 100%; } } @media only screen and (max-width: 500px) { .leader-card { margin-bottom: 40px!important; margin-top:50px; } .leader-card-content img{ width: 108px; min-width: 108px; height: 130px; } .leader-card a { width: 100%; margin: auto; } .leader-card-message{ padding: 16px 10px 10px 12px; width:calc(100% - 108px); } .leader-card-job { padding: 4px; padding-left: 0; margin-top:2px; } .leader-card-name { margin-bottom: 4px; } }