等分布局table

table

by DarcyAn

HTML

<div class="parent-fix">
<div class="parent">
  <div class="column"><p>1</p></div>
  <div class="column"><p>2</p></div>
  <div class="column"><p>3</p></div>
  <div class="column"><p>4</p></div>
</div>
</div>

CSS

.parent-fix{
  margin-left: -20px;
}
.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.column {
  display: table-cell;
  padding-left: 20px;
}
p {
  background: pink;
  margin: 0;
}