DIV+CSS如何实现三列宽度自适应

html-css034

DIV+CSS如何实现三列宽度自适应,第1张

1、首选看一下html代码:

html代码:

<div id="left">

<div class="inner">this is left sidebar content</div>

</div>

<div id="main">

<div class="inner">this is main content</div>

</div>

<div id="right">

<div class="inner">this is right siderbar content</div>

</div>

这种方法是借助于负的margin来实现的,首先在中间列定好固定值,因为此值是不会在改变的,接着对其进行左浮动;那么关键地主是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,此负的左边距最理想的值是中间栏宽度的一半加上1px,这样一来,左右边栏内容无法正常显示,那是因为对他们进行了负的左边距操作,现在只需要在左右边栏的内层div.inner将其拉回来。

2、css样式写法如下:

#left,

#right {

float: left

margin: 0 0 0 -271px

width: 50%

}

#main {

width: 540px

float: left

background: green

}

.inner {

padding: 20px

}

#left .inner,

#right .inner {

margin: 0 0 0 271px

background: orange

}

3、具体效果如下:

这个是一个鼠标移动事件,你只写了一个鼠标接触到的事件,而没有写鼠标离开时的事件所以就这样咯 鼠标接触是的事件onmouseover 鼠标离开时事件onmouseout,你是写了一个onmouseover事件 少了一个onmouseout的事件,在onmouseout事件里面写把下拉菜单的下拉部分隐藏了 就可以了

1楼说的是正确的(规范的)代码

但IE5/6有BUG 使这段代码在IE5/6不起作用(IE7/E8都没问题)

因此要使用其他方法

其中一种就是楼主使用的text居中

不过这个代码在Firefox和IE7/8又会失效(因为这是不规范的代码)

所以要用另一个更通用的方法--负边距

left:50%

width:800px

margin-left:-400px//请注意 边距和定位的方向要一致(同为左或右) 值是宽度的一半

实际上这里就是把元素的一边定位在网页中间 然后通过设置边距把超出的部分拉回来