similar effect: 
question: the width of the parent element adapts to the width of the browser window, so how are the child elements evenly distributed horizontally (including the left and right margins)?
requires compatibility with ie8 regardless of css3 layouts such as flex.
parent element width percentage, inside the box inline-block and width percentage, and then add the outer margin percentage to the box. In addition, the percentage of the outer margin of the box is set as a percentage based on the width of the parent element, so all box widths (%) plus all outer margins of all boxes (%) = parent element width (that is, 100%).
< hr >add: using inline-block elements and the gap between elements will lead to a large gap, this problem you search how to solve, the details will not be carried out here.
flex layout
parent container display:flex; then debug justify-content, to select the effect you want.
1. The width of the parent element occupies 7% of the width of the parent element. The width of the parent element is dynamically added when splicing html
2. Each element itself occupies 93% / number of elements < li style= "width:'+ (93/itemsLength) .tofixed (6) +'+'%'; float:left;display:inline-block" >
<style>
.bg {
padding: 15px 30px;
background-color: -sharpe1e1e1;
}
.ul-wrapper {
padding-left: 0;
margin-right: -15px;
}
.ul-wrapper::after {
display: block;
content: '';
clear: both;
}
.li-item {
float: left;
width:25% ;
box-sizing: border-box;
border-right: 15px solid transparent; // 15px .ul-wrapper margin-right:-15px
list-style-type:none;
}
.color {
height: 150px;
background-color: -sharp08c;
}
</style>
<html>
<!-- margin -->
<div class="bg">
<p >
<ul class="ul-wrapper">
<li class="li-item">
<div class="color"></div>
</li>
<li class="li-item">
<div class="color"></div>
</li>
<li class="li-item">
<div class="color"></div>
</li>
<li class="li-item">
<div class="color"></div>
</li>
</ul>
</div>
</html>recently I was watching Zhang Xinxu's "css World" and referred to his method
dynamic effects that are often overlooked are so important to user experience design Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...