如何使用CSS布局左右两栏?

html-css09

如何使用CSS布局左右两栏?,第1张

手机浏览器一般都不支持

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。

举一反三,你根据你的需要调整宽度的值就可以了。