ul 列表能做高度自适应么？ 一个CSS块里做同时拥有图片和文字的滚动效果 该怎么做。

Question

如题所述

Answer 1

ul里面的元素li不浮动的话，它就能自适应高度，DIV也一样。块内的滚动效果有JS自定的和marquee两种：<marquee>中也可以放图片和文字，它不是无缝连接的滚动。js滚动用的比较多一点： <style type="text/css">/* Scroll */
#MarqueeImg {padding: 0px;height: 116px;width: 716px;overflow: hidden;margin: 0px;}
*html #MarqueeImg {width:714px;}/*For IE6 Only*/
#MarqueeImg #ScrollBox {width: 1650px; overflow: hidden;}
#MarqueeImg #ScrollDiv1,.Doc .Main .Con .Content #MarqueeImg #ScrollDiv2 {width: 798px; float: left;}
#MarqueeImg .ScrollPhoto {float: left;padding: 0px;margin: 0px;}
#MarqueeImg .ScrollPhoto dt {text-align: center;width:133px /*6%*/;float: left;}
#MarqueeImg .ScrollPhoto dt img {border: 1px solid #B8A867;margin: 0px;padding: 1px;}
#MarqueeImg .ScrollPhoto dt div {width: 122px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;padding: 0px;height: 17px;}</style> <div id="MarqueeImg">
<div id="ScrollBox">
<div id="ScrollDiv1">
<dl class="ScrollPhoto">
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">xxxxxxxx</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">yyyyyyy</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准</a></div>
</dt>
<dt><a href="" target="_blank"><img border="0" alt="" src="/Images/Demo1.jpg" width="120" height="90" /></a>
<div><a href="" target="_blank">标准Last</a></div>
</dt>
</dl>
</div>
<div id="ScrollDiv2"></div>
</div>
</div>
<script type="text/javascript">
<!--//
var obj = function(id){return document.getElementById(id);}
var speed = 2;
obj("ScrollDiv2").innerHTML = obj("ScrollDiv1").innerHTML;
function Marquee(){
if(obj("MarqueeImg").scrollLeft >= obj("ScrollDiv1").scrollWidth){
obj("MarqueeImg").scrollLeft = 0;
}else{
obj("MarqueeImg").scrollLeft ++;
}
}
var MyMar = setInterval(Marquee,speed);
obj("MarqueeImg").onmouseover = function(){clearInterval(MyMar);}
obj("MarqueeImg").onmouseout = function(){MyMar=setInterval(Marquee,speed);}
//-->
</script>
需要CSS与JS配合了！！研究下CSS，如果内容要加，CSS的总宽度也要增加。