84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
面试的时候碰到的问题, 如何实现四栏等宽,中间设置一定间隙的自适应布局:
如图,在未知宽度的父容器中, 里面四列等宽,中间间隙相等,比如10px:(我目前只想到是用JS先获取父容器宽度,然后通过减去间隙,再计算设置列的宽度后设置列宽度),有没有不用JS的方法?
闭关修行中......
<meta charset="UTF-8"> <title>四列等框</title> <style type="text/css"> *{margin: 0;padding:0;} .wrap{ display: flex; height: 400px; } .wrap p{ background: blue; flex: 1; } .wrap p+p{ margin-left: 10px; } </style> <p class="wrap"> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> </p>
</body>
你可以这样试试:(假设外层容器的宽度为100%),.wrap p{
background: blue; float:left; width:20%; height:100%; margin:0 2.5%; }
bootstrap的栅格系统
</body>
你可以这样试试:(假设外层容器的宽度为100%),
.wrap p{
bootstrap的栅格系统