1. 爱易网页
  2. Java教程
  3. css自动布局时遇到的一个头疼的有关问题

css自动布局时遇到的一个头疼的有关问题

日期：2014-05-17　 浏览次数：20667 次

css自动布局时遇到的一个头疼的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.thumb{
background: #dddddd;
}
.thumb img{
height: 60px;
width: 80px;
}
.thumb-wrap{
float: left;
margin-right: 0;
margin-left: 4px;
margin-top: 4px;
margin-bottom: 4px;
}
.thumb-wrap span{
display: block;
overflow: hidden;
text-align: center;
}

.x-view-over{
  border:1px solid #dddddd;
}
</style>

<script type="text/javascript">
function mover(d) {
d.className = "thumb-wrap x-view-over";
}

function mout(d) {
d.className = "thumb-wrap";
}
</script>
</head>
<body>
<div style="width: 450px;">
<div class="thumb-wrap" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>1111</span></div>
<div class="thumb-wrap" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>2222</span></div>
<div class="thumb-wrap" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>3333</span></div>
<div class="thumb-wrap" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>4444</span></div>
<div class="thumb-wrap" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>5555</span></div>
<div class="thumb-wrap x-view-over" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>6666</span></div>
<div class="thumb-wrap" onmouseover="mover(this)" onmouseout="mout(this)">
<div class="thumb"><img src="example.png"></div><span>7777</span></div>
</div>
</body>
</html>

用户可调整最外层div的宽度，当宽度变小时，里面会分成二行或多行显示。
问题是当鼠标移动到第一行中的div上时，第二行就会变成右对齐，很是不解！对css很头疼！
哪位高手帮帮忙!

------解决方案--------------------
这个问题是由于图层太多引起的，
你只需要在每个DIV的CSS样式中增么position:absolute，
绝对定位一下图层就好了，就是繁琐一点！
这样做的好处，在多浏览器的情况下，也可以按照要求输出效果
------解决方案--------------------
样式太多就会相互影响，自己理一下逻辑关系，调整一下
------解决方案--------------------
暂时没有看明白，稍等
------解决方案--------------------
"块"是层div的一个特征；出现这个问题就相当于是在一个平面上放了很多汽车，当前面的汽车占了位置，后面的汽车必须要排在下一列。有一个属性叫overflow：auto，是对上层的float控制；
------解决方案--------------------
学习中

相关资料更多>

  1. 求高手给解答一下 java链接mysql数据库错误
  2. 做一个记事本遇到的有关问题
  3. 用eclipse的插件eclipseUML如何画协作图（Collaboration Diagram）
  4. 为什么插入数据时抛出sqlerror错误
  5. 怎么使用JAR文件中的类
  6. conn=ds.getConnection();为什么conn会为空呢？请大家帮忙！该如何处理
  7. 有关jsp连oracle8的有关问题
  8. Form切换回Canvas后，左右软件键不能捕获，请教怎么解决
  9. Struts2的有关问题