极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>响应式开发</title>
<link rel="stylesheet" href="../css/reset.css" />
<style>
body {
padding:5px;
}
.list li {
height:40px;
background:#f0f0f0;
margin-bottom:5px;
}
@media all and (max-width:480px) {
.list {
width: 100%;
}
.cen .con {
float:left;
width: 49%;
height: 200px;
margin: 0 0.5% 5px;
background: #ccc;
}
}
@media all and (min-width:481px) {
.list {
float:left;
width: 23.5%;
}
.wrap .cen {
float: left;
width: 74.5%;
}
.cen .con {
float: left;
width: 49%;
height: 200px;
margin: 0 0.5% 5px;
background: #ccc;
}
}
@media all and (min-width:961px) {
.list {
float: left;
width: 23.5%;
}
.wrap .cen {
float:left;
width: 74.5%;
}
.cen .con {
float:left;
width:32%;
height:200px;
margin:0 0 0.33% 5px;
background:#ccc;
}
}
</style></head>
<body>
<div class="wrap clearfix">
<ol class="list">
<li>列表内容01</li>
<li>列表内容02</li>
<li>列表内容03</li>
<li>列表内容04</li>
</ol>
<div class="cen clearfix">
<div class="con">内容块1</div>
<div class="con">内容块2</div>
<div class="con">内容块3</div>
<div class="con">内容块4</div>
<div class="con">内容块5</div>
<div class="con">内容块6</div>
</div>
</div></body>
</html>
![Z`OBMGG{F~2D3]Y~H6KB(AE.png](/img/bVbBkbQ "Z`OBMGG{F~2D3]Y~H6KB(AE.png")
就一个问题：为什么.con的宽度设置为 49.5% 时 应该显示在480px和481-960px下，就图(a)和图(b)的显示效果，但是在浏览器时.con显示一个，而不是每行两个，宽度 49.5% 2 + 外边距0.5%2=100% 应该是刚刚正好的，但是每行却只显示一个。
在961px下，设置为33%时，图(c)的效果,但是每行只显示了2个.con。
33% 3 + 外边距0.33% 3=99.99% ,应该也是刚刚正好的.
但是只有设置小0.5%-1% 才能正常显示？为什么
html5
margin 只 margin 一边吗？两个元素左右就有四个 margin 啊。。。。
49 x 2 + 0.5 x 4 = 100 是可以的