均分布局（等比布局）
最近有朋友问我布局问题。要点：怪异盒模型。写波笔记〜〜〜
有一个 ul 下面有 5个 li ,前四个 li 右边有 20的边距。最后一个 li 没有边距。求均分？
效果图如下 ：
方法如下：
| 方法一： |
|
|
<ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> |
ul { width: 100%; height: 210px; display: flex; } li { width: 100%; height: 100%; list-style: none; width: calc((100%-80px)/5); margin-right: 20px; } li > div { width: 100%; height: 100%; } li:last-child { margin: 0; } |
| 方法二： |
|
|
<ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> |
ul { width: 100%; height: 210px; background: orange; display: flex } li { width: 100%; height: 100%; list-style: none; width: calc(100%/5); margin-right: 20px; box-sizing: border-box; } li > div { width: 100%; height: 100%; background: red; } li:nth-last-child(1){ margin-right: 0; } |
| 方法三： |
|
|
<div id="drap"> <div class="big"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="big"></div> <div class="small"></div> <div class="big"></div> </div> |
#drap{ width: 100%; height: 200px; /* float: right; */ display: flex; } .big{ width: calc((100%-80) / 5); height: 200px; background-color: aqua; } .small{ width: 20px; height: 200px; background-color: red; } |