최근에 작은 프로그램을 작성하다가 레이아웃 문제에 직면했습니다. div의 너비 비율이 너비:20%입니다(예: 화면 너비의 20%). div를 정사각형으로 만드는 방법은 무엇입니까? 우리는 모바일 터미널에서 작업하고 있기 때문에 화면 너비가 가변적이며 div 상자의 너비와 높이가 동일하고 정사각형으로 나타나기를 원합니다. 효과는 다음과 같습니다.
이제 찾은 솔루션을 요약해 보겠습니다.
옵션 1: JavaScript/jQuery 방법:
<code> <style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } ul{ width: 100%; list-style: none; } li{ width: 20%; float: left; } li:first-child{ background: red; } li:nth-child(2){ background: green; } li:nth-child(3){ background: blue; } li:nth-child(4){ background: yellow; } li:nth-child(5){ background: pink; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script src="wjs/lib/jquery/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).on('resize', function () { $('li').css('height',$('li').css('width')); }).trigger('resize'); }) </script> </code>
옵션 2: CSS의 패딩 상단 또는 하단 패딩을 통해 상자를 받칩니다
<code><style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } ul{ width: 100%; list-style: none; } li{ width: 20%; float: left; padding-top: 20%; } li:first-child{ background: red; } li:nth-child(2){ background: green; } li:nth-child(3){ background: blue; } li:nth-child(4){ background: yellow; } li:nth-child(5){ background: pink; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </code>
옵션 3: vw/vh 단위를 사용하지만 vw/vh 단위는 상위 상자가 아닌 현재 뷰포트의 너비/높이를 100개의 동일한 길이로 나누기 때문에 계산해야 한다는 점에 유의해야 합니다. 🎜>
<code><style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } ul{ width: 80%; margin: 0 auto; list-style: none; } li{ width: 16vw; height: 16vw; float: left; } li:first-child{ background: red; } li:nth-child(2){ background: green; } li:nth-child(3){ background: blue; } li:nth-child(4){ background: yellow; } li:nth-child(5){ background: pink; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </code>