纯css实现div同行显示

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ssxueyi/article/details/86539354

纯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;
	background: #e29c9c;
	width:350px;
}
</style>
</head>
<body>
<br>
<div  class="div0">div0:我是普通div</div>
<div  class="div1">div1:我要和div2同行</div>
<div  class="div2">div2:我要和div1同行</div>
<div  class="div3">div3:我想要和div2同行,但是我太长了,所以只能换行</div>
<div  class="div4">div4:我想要和div3同行,但是我太长了,所以只能换行</div>
<div  class="div5">div5:我想和div4同行</div>
<div  class="div6">div6:我我也想和div4同行,但是我要在右边</div>
</body>
</html>

 

展开阅读全文

没有更多推荐了,返回首页