一开始毫无头绪，看了评分最高的团队的代码，觉得很棒。
思考了一下有没有优化的方法，发现权衡之下并没有。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>IFE_2016_1_8</title>
6 </head>
7 <style>
8 body{
9 margin: 0;
10 width: 100%;
11 }
12
13 .constr{
14 box-sizing: border-box;
15 padding: 10px;
16 width: 100%;
17 }
18
19 .fix:before .fix:after{
20 content: "";
21 display: table;
22 clear: both;
23 }
24 .outer{
25 box-sizing: border-box;
26 padding: 10px;
27 float: left;
28 }
29
30 .inner{
31 height: 50px;
32 background: #eee;
33 border: 1px solid #c5c5c5;
34 }
35
36 @media (min-width: 769px){
37 .outer-bs-4{
38 width: 33.3333%;
39 }
40
41 .outer-bs-3{
42 width: 25%;
43 }
44
45 .outer-bs-6{
46 width: 50%;
47 }
48
49 .outer-bs-1{
50 width: 8.3333%;
51 }
52
53 .outer-bs-2{
54 width: 16.6666%;
55 }
56 }
57
58 @media (max-width: 768px){
59 .outer-ss-6{
60 width: 50%;
61 }
62
63 .outer-ss-12{
64 width: 100%;
65 }
66
67 .outer-ss-3{
68 width: 25%;
69 }
70
71 .outer-ss-2{
72 width: 16.6666%;
73 }
74
75 .outer-ss-8{
76 width: 66.6666%;
77 }
78 }
79 </style>
80 <body>
81 <div class="constr fix">
82 <div class="outer outer-bs-4 outer-ss-6">
83 <div class="inner"></div>
84 </div>
85 <div class="outer outer-bs-4 outer-ss-6">
86 <div class="inner"></div>
87 </div>
88 <div class="outer outer-bs-4 outer-ss-12">
89 <div class="inner"></div>
90 </div>
91 <div class="outer outer-bs-3 outer-ss-3">
92 <div class="inner"></div>
93 </div>
94 <div class="outer outer-bs-6 outer-ss-6">
95 <div class="inner"></div>
96 </div>
97 <div class="outer outer-bs-3 outer-ss-3">
98 <div class="inner"></div>
99 </div>
100 <div class="outer outer-bs-1 outer-ss-2">
101 <div class="inner"></div>
102 </div>
103 <div class="outer outer-bs-1 outer-ss-2">
104 <div class="inner"></div>
105 </div>
106 <div class="outer outer-bs-2 outer-ss-8">
107 <div class="inner"></div>
108 </div>
109 <div class="outer outer-bs-2 outer-ss-3">
110 <div class="inner"></div>
111 </div>
112 <div class="outer outer-bs-6 outer-ss-3">
113 <div class="inner"></div>
114 </div>
115 </div>
116 </body>
117 </html>
他们的代码使用box-sizing: border-box来解决了20px间距的问题，使用伪元素来清除浮动（我打算把父级元素改为overflow：hidden来解决，其实差不多，而且据说overflow有一些坑）
对于类的命名，我选择了张鑫旭对类名的命名规律。（感觉在于大的工程中会比较有用，然而这是一个小任务）
后来想到还有一种方法可以不使用浮动，就是将outer的display设置为inline-block，不过缩进有些辣眼睛，相较之下还是原作者的方法比较好，使用这样的缩进的原因请看css table-cell自动补充元素问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE_2016_1_8</title>
</head>
<style>
body{
margin: 0;
width: 100%;
}
.constr{
box-sizing: border-box;
padding: 10px;
width: 100%;
overflow: hidden;
}
.outer{
box-sizing: border-box;
padding: 10px;
display: inline-block;
}
.inner{
height: 50px;
background: #eee;
}
@media (min-width: 769px){
.outer-bs-4{
width: 33.3333%;
}
.outer-bs-3{
width: 25%;
}
.outer-bs-6{
width: 50%;
}
.outer-bs-1{
width: 8.3333%;
}
.outer-bs-2{
width: 16.6666%;
}
}
@media (max-width: 768px){
.outer-ss-6{
width: 50%;
}
.outer-ss-12{
width: 100%;
}
.outer-ss-3{
width: 25%;
}
.outer-ss-2{
width: 16.6666%;
}
.outer-ss-8{
width: 66.6666%;
}
}
</style>
<body>
<div class="constr">
<div class="outer outer-bs-4 outer-ss-6">
<div class="inner"></div>
</div><div class="outer outer-bs-4 outer-ss-6">
<div class="inner"></div>
</div><div class="outer outer-bs-4 outer-ss-12">
<div class="inner"></div>
</div><div class="outer outer-bs-3 outer-ss-3">
<div class="inner"></div>
</div><div class="outer outer-bs-6 outer-ss-6">
<div class="inner"></div>
</div><div class="outer outer-bs-3 outer-ss-3">
<div class="inner"></div>
</div><div class="outer outer-bs-1 outer-ss-2">
<div class="inner"></div>
</div><div class="outer outer-bs-1 outer-ss-2">
<div class="inner"></div>
</div><div class="outer outer-bs-2 outer-ss-8">
<div class="inner"></div>
</div><div class="outer outer-bs-2 outer-ss-3">
<div class="inner"></div>
</div><div class="outer outer-bs-6 outer-ss-3">
<div class="inner"></div>
</div>
</div>
</body>
</html>
一下是辣眼睛的版本。
时间： 2024-11-12 04:14:06