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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DIV+CSS如何实现三列宽度自适应相关的知识,希望对你有一定的参考价值。

如何让三列的宽度根据内容的宽度自适应自身的宽度?
如果内容都很少,会以外面的宽度来平分

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、具体效果如下:

参考技术A 三列自适应布局没什么意义吧,而且还是根据内容,要做的话可以些写两层DIV,第一层固定宽度,第二层四个DIV,前三个用浮动,最后一个用清除浮动。本回答被提问者采纳 参考技术B 考虑到浏览器的兼容性:您可以用这段代码定义:
width:auto !important;width:600px; min-widthh600px;
这样的话可以自适应了,但是让这三个div在同一行上是很难控制的,需要你费时间调整了。

建议最好不要自适应了,最好定义好宽度,让三个div都左浮动

以上是关于DIV+CSS如何实现三列宽度自适应的主要内容,如果未能解决你的问题,请参考以下文章

CSS 布局实例系列如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

抛砖引玉之宽度自适应布局

如何设置页面宽度自适应

两列自适应布局及三列自适应布局

css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度

如何实现内部div的高度自适应外部的div