如何让float的div，其中某一个div高度增加多倍后，仍旧是一行两个div

kiina2009

发布于
2016-12-25

我的页面上有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的时候，布局变成这样了，如下：
图片描述

我现在想要这样的效果，如下图：
图片描述

float css 布局布局错乱

阅读 3.2k

3 个回答

得票最新

trust2018

1.1k22100172

发布于
2016-12-25

css3选择器清除奇数div的左浮动即可

xiezk

5117

发布于
2016-12-25

更新于
2016-12-25

分成左右两边

<div class="left" style="float:left">
    <div class="col1">行1</div>
    <div class="col3">行3</div>
    <div class="col5">行5</div>
</div>
<div class="right" style="float:right">
    <div class="col2">行2</div>
    <div class="col4">行4</div>
</div>