방법 1: box-pack의 justify 구현 사용: 디스플레이: flex 탄성 상자 모델을 사용하여 창 크기에 따른 적응형 너비를 구현합니다. 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <style> *{ margin: 0; padding: 0; } .container{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 30px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack:justify ; justify-content: space-between; } .container a{ width:20%; display: block; height: 50px; line-height: 45px; text-align: center; border 1px solid red; color: sandybrown; font-size: 16px; margin-bottom: 5px; border-radius: 3px; background-color: skyblue; text-decoration: none; } </style> </head> <body> <p class="container"> <a class="link" href="#">10</a> <a class="link" href="#">20</a> <a class="link" href="#">30</a> <a class="link" href="#">50</a> </p> </body> </html>
효과는 다음과 같습니다.
방법 2: 열 다중 열 레이아웃을 사용하여 구현합니다. 구체적인 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title></title> <style> *{margin: 0;padding: 0;} .container{ -webkit-column-count: 4;-moz-column-count: 4;column-count: 4; -webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px; margin-top: 100px; } .container a{ display: block; height: 50px; line-height: 50px; text-align: center; border: 1px solid sandybrown; color: #0066CC; font-size: 16px; margin-bottom: 5px; border-radius: 4px; background-color: salmon; text-decoration: none; } </style> </head> <body> <p class="container"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </p> </body> </html>
효과는 다음과 같습니다:
위 내용은 CSS3에서 양쪽 끝 정렬을 달성하기 위해 이미지 및 텍스트 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!