Home >Web Front-end >HTML Tutorial >css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose
css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:531256browse
css实现的左右两栏宽度自适应中间一栏宽度固定:
更多的时候可能是设置左右两栏宽度固定，中间一栏宽度自适应，不过本章节恰恰相反，下面介绍一下如何实现中间一栏宽度固定，左右两栏宽度自适应，关于左右两栏固定，左右宽度自适应可以参阅左右两列宽度固定中间一栏宽度自适应代码实例一章节。
代码实例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0; padding:0;}body{ font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px;}#header,#footer{ clear:both; padding:10px; text-align:center;}#left,#right{ float:left; width:50%; margin:0 0 0 -151px;}#innerLeft,#innerRight{ margin:0 0 0 151px; background-color:#efefef;}#middle{ float:left; width:300px; background-color:#ccc;}.inner{ padding:12px; text-align:center; font-size:12px;}</style></head><body><div id="left"> <div id="innerLeft" class="inner">左侧栏目</div></div><div id="middle"> <div id="innerMiddle" class="inner">中间栏目</div></div><div id="right"> <div id="innerRight" class="inner">右侧栏目</div></div></body></html> 上面的代码实现了我们的要求，可以实现中间栏目尺寸固定，两端栏目宽度自适应效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15086
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：DWZ ＋ Bootstrap 整合应用（dwz for bootstrap v1.0.0）_html/css_WEB-ITnoseNext article：大丧失！css布局！_html/css_WEB-ITnose