【CSS布局】京东多列布局

<div class="container">
  <!-- 包裹盒子，只为了扩大父元素的宽度，以便于可以放下6个盒子 -->
  <div class="wrapper">
    <div class="item left">1</div>
    <div class="item left">2</div>
    <div class="item right">3</div>
    <div class="item right">4</div>
    <div class="item right">5</div>
    <div class="item right">6</div>
    <div class="item right">3</div>
    <div class="item right">4</div>
    <div class="item right">5</div>
    <div class="item right">6</div>
    <div class="item right">3</div>
    <div class="item right">4</div>
    <div class="item right">5</div>
    <div class="item right">6</div>
  </div>
</div>

* {
        margin: 0;
        padding: 0;
      }
.container {
  width: 1190px;
  margin: 0 auto;
  background-color: #f00;
  height: 1000px;
}
.container .wrapper {
  /* 父元素的宽度（1190） = 子元素宽度auto + margin-left(0) + margin-right(-10) */
  margin-right: -10px;
}

.container .wrapper .item {
  width: 290px;
  float: left;
  margin-right: 10px;
  background-color: pink;
}

.container .wrapper .item.left {
  height: 370px;
}

.container .wrapper .item.right {
  height: 180px;
  margin-bottom: 10px;
}

核心思想：块级元素的宽度默认为auto = 父盒子的宽度 - 块级元素的margin(left 和 right的值)