float
浮动,所以可以用
display:
inline-block
来代替它,当然你也可以用table来布局。用两个
display:inline-block
的块元素,并设定它们的宽度:width:49%
就可以实现一栏两列的布局了。
这个需要通过设置元素的浮动来实现两者左右并排。
1、通过设置侧边栏和内容区域的浮动来实现两者并排,设置方法如下:
<div id=container><div id=parameter>左边栏</div>
<div id=main>文章主要区域</div>
</div>
css设置浮动如下:
#parameter{float:left
}
#main{
float:left
}
2、其他的效果根据需要设置css样式即可。
那需要css+js来实现代码片段如下:
<style type="text/css">
#autoimg {
max-width:500px/*IE7、FF、Opera等其他非IE6浏览器下最大宽度为500px*/
}
</style>
<img src="图片路径" id="autoimg" />
<script language="javascript">
//IE6浏览器下图片autoimg的最大宽度为500px
function set_autoimg_width() {
var width = parseInt(document.getElementById("autoimg").width)
if (width >0) {
if (width >500)
document.getElementById("autoimg").width = 500
window.clearInterval(iid)
}
}
var iid = window.setInterval(set_autoimg_width, 100)
</script>
上面的CSS和JS可以让图片的宽度自动适应为小于或等于500PX。
举一反三,你根据你的需要调整宽度的值就可以了。