CSS實現(xiàn)平分寬度不算border非常簡單,我們只需要使用flex布局就能輕松實現(xiàn)。
.container{ display:flex; justify-content: space-between; box-sizing:border-box; padding:0 5px; } .item{ width:33.33%; box-sizing:border-box; padding:10px; border:1px solid #000; }
在上面的代碼中,我們使用了flex布局,并設(shè)置了容器的justify-content屬性為space-between,這樣就可以讓子元素平分寬度。然后我們在子元素中設(shè)置了寬度為33.33%,這樣就能保證3個元素平分寬度。
同時,我們還需要注意box-sizing屬性的設(shè)置。由于border會占用寬度,所以我們需要將box-sizing屬性設(shè)置為border-box,這樣設(shè)置后padding和border就不會影響元素的寬度了。
最后,我們?yōu)榱俗屝Ч庇^,給子元素加了1px的實線邊框,這樣就可以看到子元素的寬度平分且沒有算上border的效果。