inline-block 布局写法示例

<div class="ly">
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
</div>

.ly {
  display: table; // For Android: Android doesn't fill in `inline-block` gaps. `display: table;` magic fills in them.
  width: 100%;
  font-size: 0 !important; // 让空格，tab，回车之类空白的不占空间
}
.ly__item {
  display: inline-block;
  vertical-align: top;
  font-size: medium; // 这只是示例。可根据实际情况设置。
}

.ly {
  display: table; 
  width: 100%;
  font-size: 0 !important;
  text-align: center;
}
.ly__item {
  display: inline-block;
  vertical-align: top;
  font-size: medium;
}

.ly {
  display: table; 
  width: 100%;
  font-size: 0 !important;
  text-align: justify;
}
.ly:after {
  content: '';
  width: 100%;
  display: inline-block;
}
.ly__item {
  display: inline-block;
  vertical-align: top;
  font-size: medium;
}

.ly {
  display: table; 
  width: 100%;
  font-size: 0 !important;
}
.ly__item {
  display: table-cell;
  font-size: medium;
}
// 给占据剩余部分的元素加该类名
.ly__item--fill {
  width: 100%;
  
}

.ly {
  display: table; 
  width: 100%;
  font-size: 0 !important;
  text-align: right;
}
.ly__item {
  display: inline-block;
  vertical-align: top;
  font-size: medium;
}

.ly {
  display: table; 
  width: 100%;
  font-size: 0 !important;
}
.ly:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.ly__item {
  display: inline-block;
  vertical-align: middle;
  font-size: medium;
}