最近做公司一个项目,涉及到手机呈现页面,当时有个需求就是实现一个列表展示功能,左边是图片,中间标题文字介绍啥的,右边是操作按钮,想想很简单嘛,一分析搞三个div排一下,两边的固定宽度,中间的自动宽度,左边div左浮动,右边div右浮动,中间宽度auto这样可适应各种手机了。
可是实际写起来确实出了些问题,咱们先看代码:
<html>
<head>
<title></title>
<style>
body div {
padding: 0px;
margin: 0px;
}
div {
height: 60px;
}
.left {
float: left;
width: 200px;
background-color: green;
}
.center {
background-color: red;
margin-left:200px;
margin-right:200px;
}
.right {
float: right;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">左边区域</div>
<div class="center">中间区域</div>
<div class="right">右边区域</div>
</body>
</html>
乍一看so easy,写好了,于是打开页面一看,什么鬼:
为毛右边的div跑下面去了,不是说好的float=right的么?你咋浮动到右下了,于是楼主很捉急,找啊找,网上找到一篇实现相同功能的例子,div都一样三个,样式也差不多,找了半天都不知道为啥,后来我就看他代码,发现他中间那个div写在最后:
<div class="left">左边区域</div>
<div class="right">右边区域</div>
<div class="center">中间区域</div>
我一看,觉得不太可能是位置问题,估计我样式受啥影响了,找了半天找了快崩溃了,要不试试丢最后?
结果一丢发现果然好了
于是网上查查浮动的介绍,才发现浮动是不在标准流中,说白了就是不喝中间区域在同一层,而中间的div是块级元素,左浮动后面加上div后,独占一行,所以第三个div加到后面后另起一行开始,所以跑右下了。所以把右边div写到左边div后面,还在第一行中,浮动到右侧,最后加上中间的div就可以了