如何让float的div，其中某一个div高度增加多倍后，仍旧是一行两个div
我的页面上有5个div，代码如下：
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./style.css" type="text/css"/>
<script src="./jquery.1.8.3.min.js"></script>
</head>
<body>
<div class="col1">行1</div>
<div class="col2">行2</div>
<div class="col3">行3</div>
<div class="col4">行4</div>
<div class="col5">行5</div>
</body>
</html>style.css
html,body{width:100%;height:100%;}
div{width:50%;float:left;text-align:center;display:block;}
.col1{height:30px;line-height:30px;background-color:yellow;}
.col2{height:30px;line-height:30px;background-color:red;}
.col3{height:30px;line-height:30px;background-color:grey;}
.col4{height:30px;line-height:30px;background-color:green;}
.col5{height:30px;line-height:30px;background-color:blue;}现在显示的效果
当增加col3的高度为70px的时候，布局变成这样了，如下：
我现在想要这样的效果，如下图：
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
分成左右两边
这个问题导致的原因是当你浮动时，左边空间不足，会自动浮动到右边
你可以写一个 通过判断div高度的js来动态插入div解决，我之前做瀑布流就是这么解决的
希望随你有所帮助
css3选择器清除奇数div的左浮动即可