HTML + CSS 连载 | 64 - 京东首页商品布局（下）
站长
· 阅读数 19
一、京东首页商品的另一种布局
京东首页还有另一种商品布局，如下所示：
1. 搭建 HTML 基本结构
针对这种布局我们可以按照左右划分，左边两个都是整体，右边四个都进行了上下的排列，共有六个 item，首先将 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 的宽度和高度以及背景颜色，具体代码如下：
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
heigh: 1000px
}
默认情况下这 6 个 item 是竖直排列的：
接着给每个 div.item 的设置样式，包括高度以及背景颜色，div.item 的宽度都为 290px，并设置一个统一的背景颜色：
.content .item {
width: 290px;
background-color: palegoldenrod;
}
左右两边的 item 的宽度一样，但是高度不一样，左边两个 div.item 的高度为 370px，右边四个 div.item 的高度为 180px，可以通过浏览器的检查工具查看到，设置具体的 CSS 样式如下：
.content .item.left {
height: 370px;
}
.content .item.right {
height: 180px;
}
在浏览器中打开 HTML 页面，效果如下；
当前 item 还是竖直排列的，并且 item 之间不好区分，可以接着给 div.item 设置外边距，包括下外边距和右外边距，具体代码如下：
.content .item {
width: 290px;
background-color: palegoldenrod;
margin-bottom: 10px;
margin-right: 10px;
}
刷新页面，效果如下：
这样可以清晰的看到每一个 item。
2. 设置浮动
当前所有的 item 是竖直排列的，因为所有的 item 都是 div 元素，默认 div 是块级元素会独占一行，要实现水平排列可以通过设置浮动来实现，先给 div.item 来设置浮动，具体代码如下：
.content .item {
width: 290px;
background-color: palegoldenrod;
margin-bottom: 10px;
margin-right: 10px;
/* 设置浮动 */
float: left;
}
刷新浏览器，效果如下：
首先给所有的 item 再加一层包裹
<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 代码如下：
.content .container {
margin-right: -10px;
}
刷新浏览器，效果如下：
这样就实现了最初想要的效果，并且避免了兼容性的问题。