纯css实现div同行,效果如下(由有10余年前台工作经验的工程师指导):
代码如下(可以直接用):
<html>
<head>
<style type="text/css">
/*页面通用样式*/
body {
background:#fff;
}
/*DIV通用样式*/
div{
text-align:center;
line-height:80px;
margin:10px;
height:80px;
}
/*普通div*/
.div0{
background:#e2e09c;
width:1300px;
}
/*同行靠左*/
.div1{
float:left;
width:600px;
background: #8d97dc;
}
/*同行靠左*/
.div2{
float:left;
width:500px;
background: #92e4ba;
}
/*想同行,但与同行的div宽度之和大于浏览器总宽度,所以只能换行*/
.div3{
float:left;
background: #8bcae8;
width:1200px;
}
/*想同行,但与同行的div宽度之和大于浏览器总宽度,所以只能换行,但可以与后续div同行*/
.div4{
float:left;
background: #e29c9c;
width:500px;
}
/*同行靠左*/
.div5{
float:left;
background: #e29c9c;
width:200px;
}
/*同行靠右*/
.div6{
float:right;