【CSS布局】float考拉布局加边框的布局

考拉布局加边框的布局

<div class="container">
  <div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

.container {
  width: 1100px;
  margin: 0 auto;
  height: 800px;
  background: #ccc;
}
.item {
  background-color: pink;
  /* 因为设置了border-box,而且margin-right损耗了1px，所以增加1px */
  width: 221px;
  height: 168px;
  float: left;
  border: 1px solid #000;
  /* 设置margin-right来覆盖两个border */
  margin-right: -1px;
  box-sizing: border-box;
}

/* 无论是第几个，有一个盒子的宽度需要比其他盒子小一个像素 */
.item:last-child {
  width: 220px;
}

核心思想：给item设置边框，有重合的边框可以利用margin负值来重叠隐藏，但需要给item宽度补偿，由于整个布局的宽度为1100px 1100px/5 = 220px，但由于布局中中间有6条边框，所以无论如何都会超出一个像素，可以将其中的一个盒子像素减少1px来解决这个问题