首页 > 代码库 > 三栏布局 中栏实现自适应宽度
三栏布局 中栏实现自适应宽度
对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏div:
<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;">这是中栏,且自适应宽度</div>
效果如下:
但是如果我们增加中栏的文字内容,并且为其添加边框和背景色,就会发现问题了:
<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;border:1px solid #999999;">这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。</div>
其结果如下:
可以看到,中栏仅有高度小于左右两栏的那部分内容才会自适应宽度,超出左右两栏的高度,就不受控制了,且其真实的宽度仍然是100%,这可以从背景和边框看出来。
不过既然它能允许浮动的两栏在其左右,并与左右两栏相安无事,就有了另一个解决方案,即指定中栏的左右外边距,以为两个侧栏留出位置,而自身内容不必担心会由于超出左右栏高度而失控。
代码如下:
<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;margin:0 100px;border:1px solid #999999;"> 这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。</div>
截图如下:
也可以使用padding(内边距)来实现相同效果,但是需要在中栏中再增加一个子div,为其指定边框和背景,代码如下:
<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;padding:0 100px;"> <div id="inner" style="border:1px solid #999999;"> 这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。这是中栏,且自适应宽度。 </div></div>
效果如下:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。