<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #eee; } *{ margin:0; padding: 0; list-style: none; } section{ width: 1000px; margin:10px auto; } ul{ background-color: #fff; border: 1px solid red; } li{ width: 150px; height: 150px; background-color: pink; margin:10px; } section:nth-child(1) ul{ /*設(shè)置伸縮布局*/ display:flex; } section:nth-child(1) ul li:nth-child(1){ /*比例*/ flex:1; } section:nth-child(1) ul li:nth-child(2){ flex:2; } section:nth-child(1) ul li:nth-child(3){ flex:1; } section:nth-child(2) ul{ /*設(shè)置伸縮布局*/ display:flex; } section:nth-child(2) ul li:nth-child(1){ /*比例*/ flex:1; } section:nth-child(2) ul li:nth-child(2){ /*flex:1;*/ } section:nth-child(2) ul li:nth-child(3){ flex:1; } </style></head><body> <section> <h4>伸縮比例</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h4>伸縮比例</h4> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
