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、具体效果如下:
width:auto !important;width:600px; min-widthh600px;
这样的话可以自适应了,但是让这三个div在同一行上是很难控制的,需要你费时间调整了。
建议最好不要自适应了,最好定义好宽度,让三个div都左浮动
以上是关于DIV+CSS如何实现三列宽度自适应的主要内容,如果未能解决你的问题,请参考以下文章
CSS 布局实例系列如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼