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

一、京东首页商品布局实现

在了解了浮动的基本使用规则之后，接下来我们尝试使用浮动来实现京东首页的商品布局。

1. 搭建最外层的 HTML 结构以及样式

首先查看商品布局中最外层盒子的宽度为 990px：

搭建基本的 HTML 结构，设置宽高、背景颜色，并使用 margin 来设置居中，代码如下：

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>
  <style>
    .content {
      width: 990px;
      margin: 0 auto;
      background-color: orangered;
      height: 700px;
    }
  </style>
</head>
<body>
  <div class="content">

  </div>
</body>
</html>

在浏览器中工打开该 HTML 页面；

2. 设置每个 item 的基本样式

商品布局一行是五个商品，我们可以在 div.content 在增加五个 div.item 表示五个商品：

html 复制代码

<div class="content">
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
    <div class="item box4">4</div>
    <div class="item box5">5</div>
</div>

查看首页中每个 item 的样式：

设置每个 item 的宽高以及背景颜色：

css 复制代码

.item {
  width: 190px;
  height: 266px;
  background-color: plum;
}

刷新页面，div 是块级元素，默认会独占一行：

3. 使用浮动

接下来我们可以通过设置浮动，让 div.item 水平排列：

css 复制代码

.item {
  width: 190px;
  height: 266px;
  background-color: plum;

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

刷新浏览器，实现了水平排列：

接着给每个 item 之间设置一个间距，设置右外边距：

css 复制代码

.item {
  width: 190px;
  height: 266px;
  background-color: plum;

  /*设置左浮动*/
  float: left;
  margin-right: 10px;
}

刷新页面，效果如下：

每个盒子所占的宽度为本身宽度 190px 加上右外边距 10px，总共 200px，五个这样的 item 占据的总宽度为 1000px，由于 content 的宽度为 990px，所以第五个 item 会自动到第二行去显示。

解决最后一个 item 自动换行的第一种方式

为了解决最后一个 item 换到下一行的问题，我们可以设置最后一个 item 的右外边距为 0：

css 复制代码

.item:last-child {
  margin-right: 0;
}

刷新页面，所有的 item 全部在一行中显示了：

如果有更多 item：

html 复制代码

<div class="content">
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
    <div class="item box4">4</div>
    <div class="item box5">5</div>
    <div class="item box1">6</div>
    <div class="item box2">7</div>
    <div class="item box3">8</div>
    <div class="item box4">9</div>
    <div class="item box5">10</div>
</div>

刷新页面，由于宽度的限制，每一行都会只有四个；

我们可以给每一行的最后一个设置右外边距为 0：

css 复制代码

    .item:nth-child(5n) {
      margin-right: 0;
    }

这样也可以全部排满：

但是使用伪元素的方式有可能对一些其他版本的浏览器存在兼容性的问题。我们可以给每一行的第五个元素加入一个特殊的 class

html 复制代码

<div class="content">
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
    <div class="item box4">4</div>
    <div class="item box5 last-item">5</div>
    <div class="item box1">6</div>
    <div class="item box2">7</div>
    <div class="item box3">8</div>
    <div class="item box4">9</div>
    <div class="item box5 last-item">10</div>
</div>

然后在设置右外边距为 0：

css 复制代码

.item.last-item {
  margin-right: 0;
}

刷新浏览器：

这样就可以实现需求的同时解决兼容性的问题。

解决最后一个 item 自动换行的第二种方式

除了上面对每行最后一个元素添加特殊的 class 这种方式外，还有另一种解决方案；我们可以增加 div.content 的宽度从 990px->1000px。

首先将代码恢复到只有5个div的情况：

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>
  <style>
    .content {
      width: 990px;
      margin: 0 auto;
      background-color: orangered;
      height: 700px;
    }

    .item {
      width: 190px;
      height: 266px;
      background-color: plum;

      /*设置左浮动*/
      float: left;
      margin-right: 10px;
    }

    /* .item:nth-child(5n) {
      margin-right: 0;
    } */

    /* .item.last-item {
      margin-right: 0;
    } */
  </style>
</head>
<body>
  <div class="content">
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
    <div class="item box4">4</div>
    <div class="item box5 last-item">5</div>
  </div>
</body>
</html>

刷新浏览器：

调整 div.content 的宽度为 1000px，将背景颜色去掉：

css 复制代码

.content {
  width: 1000px;
  margin: 0 auto;
  /* background-color: orangered; */
  height: 700px;
}

刷新浏览器：

解决最后一个 item 自动换行的第三种方式

这里还有第三种解决方案：将 item 包裹到一个 container 中，通过设置负的 margin-right 来实现

首先将代码恢复，保持 div.content 的宽度为 990px，参考上面的代码

将 item 包裹到一个 container 中，结构如下：

html 复制代码

<div class="content">
    <div class="container">
      <div class="item box1">1</div>
      <div class="item box2">2</div>
      <div class="item box3">3</div>
      <div class="item box4">4</div>
      <div class="item box5 last-item">5</div>
    </div>
</div>

设置 container 的样式：

css 复制代码

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

刷新浏览器：

上述方式也可以实现在一行里面水平排列五个 item，我们可以先来计算一下 div.content 的宽度，这里的公式如下：

div.content 的宽度 = div.container的宽度 + mr = （（190 + 10） * 5） - 10 = 990

上述的公式是完全成立的，当然我们也可以通过设置左右外边距为 -5px 实现同样的效果：

css 复制代码

.content .container {
  /* margin-right: -10px; */
  margin: 0 -5px;
}

刷新浏览器：

设置负的 margin 没有兼容性的问题，是最佳方案。