Heim >Web-Frontend >HTML-Tutorial >css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose
css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:531256Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：DWZ ＋ Bootstrap 整合应用（dwz for bootstrap v1.0.0）_html/css_WEB-ITnoseNächster Artikel：大丧失！css布局！_html/css_WEB-ITnose