HTML + CSS 连载 | 64 - 京东首页商品布局（下）

一、京东首页商品的另一种布局

京东首页还有另一种商品布局，如下所示：

1. 搭建 HTML 基本结构

针对这种布局我们可以按照左右划分，左边两个都是整体，右边四个都进行了上下的排列，共有六个 item，首先将 HTML 结构搭建出来，具体的代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="content">
    <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>
</body>
</html>

接着设置 dov.content 的宽度和高度以及背景颜色，具体代码如下：

css 复制代码

.content {
  width: 1190px;
  margin: 0 auto;
  background-color: #f00;
  heigh: 1000px
}

默认情况下这 6 个 item 是竖直排列的：

接着给每个 div.item 的设置样式，包括高度以及背景颜色，div.item 的宽度都为 290px，并设置一个统一的背景颜色：

css 复制代码

.content .item {
  width: 290px;
  background-color: palegoldenrod;
}

左右两边的 item 的宽度一样，但是高度不一样，左边两个 div.item 的高度为 370px，右边四个 div.item 的高度为 180px，可以通过浏览器的检查工具查看到，设置具体的 CSS 样式如下：

css 复制代码

.content .item.left {
  height: 370px;
}

.content .item.right {
  height: 180px;
}

在浏览器中打开 HTML 页面，效果如下；

当前 item 还是竖直排列的，并且 item 之间不好区分，可以接着给 div.item 设置外边距，包括下外边距和右外边距，具体代码如下：

css 复制代码

.content .item {
  width: 290px;
  background-color: palegoldenrod;
  margin-bottom: 10px;
  margin-right: 10px;
}

刷新页面，效果如下：

这样可以清晰的看到每一个 item。

2. 设置浮动

当前所有的 item 是竖直排列的，因为所有的 item 都是 div 元素，默认 div 是块级元素会独占一行，要实现水平排列可以通过设置浮动来实现，先给 div.item 来设置浮动，具体代码如下：

css 复制代码

.content .item {
  width: 290px;
  background-color: palegoldenrod;
  margin-bottom: 10px;
  margin-right: 10px;

  /* 设置浮动 */
  float: left;
}

刷新浏览器，效果如下：

这里出现了与上篇文章HTML + CSS 连载 | 63 - 京东首页商品布局（上）中同样的问题，即最后两个 item 会自动的移动的第二行排列，主要原因就是由于总的宽度即所有盒子自身的宽度加上右外边距的宽度超过了外层盒子 div.content 的跨度，所以才会自动换行。

这里考虑到兼容性的问题，我们可以直接使用上篇文章HTML + CSS 连载 | 63 - 京东首页商品布局（上）中的第三种解决方案，即设置一个负的外边距。

首先给所有的 item 再加一层包裹

html 复制代码

<body>
  <div class="content">
    <div class="container">
      <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>
  </div>
</body>

然后在设置一个负的外边距，具体 CSS 代码如下：

css 复制代码

.content .container {
  margin-right: -10px;
}

刷新浏览器，效果如下：

这样就实现了最初想要的效果，并且避免了兼容性的问题。