84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
面试的时候碰到的问题, 如何实现四栏等宽,中间设置一定间隙的自适应布局:
如图,在未知宽度的父容器中, 里面四列等宽,中间间隙相等,比如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的栅格系统