全等四宫格 table

全等四宫格 table

by DarcyAn

HTML

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

CSS

.parent {
  display: table;
}
.outer {
  display: table-row;
  margin-left: -10px;
 }
.column{
  display: table-cell;
  padding-left: 10px;
}
p{
  width: 100px;
  height: 100px;
  background: pink;
  margin: 0 0 10px 0;
}