Rumah > Artikel > hujung hadapan web > CSS3中实现两端对齐的图文代码分享
方法一:使用box-pack的justify实现:使用display: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>
效果如下:
方法二:使用column多列 布局实现,具体代码如下:
<!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>
效果如下:
Atas ialah kandungan terperinci CSS3中实现两端对齐的图文代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!