如何解决两列响应式布局左右浮动:如何消除间隙?
我正在尝试将响应式布局的以下容器以交替顺序分成两列。这是发生了什么的图表:
这是在 JSfiddle 上:
有没有办法消除这些差距?如果不是,有什么替代方法可以将容器按照它们在代码中出现的原始顺序保留在移动设备上,并在桌面显示中将其中的一些内容放在一边(进入第二列)?
这是我目前的代码:
<html>
<head>
<style>
#wrapper { width:200px; }
#div0-header { height: 50px; width:100%; background:lime; }
#div1-sub-header { height:100px; width: 50%; float:left; clear:left; background:yellow; }
#div2-navigation { height: 75px; width: 50%; float:right; clear:right; background:orange; }
#div3-content { height:100px; width: 50%; float:left; clear:left; background:red; }
#div4-about { height: 50px; width: 50%; float:right; clear:right; background:fuchsia; }
#div5-footer { height: 25px; width: 50%; float:left; clear:left; background:pink; }
#div6-copyright { height: 15px; width: 50%; float:right; clear:right; background:lightblue; }
</style>
</head>
<body>
<div id="wrapper">
<div id="div0-header"> 0 header </div>
<div>
<div id="div1-sub-header"> 1 sub-header </div>
<div id="div2-navigation"> 2 navigation </div>
<div id="div3-content"> 3 content </div>
<div id="div4-about"> 4 about </div>
<div id="div5-footer"> 5 footer </div>
<div id="div6-copyright"> 6 copyright </div>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。