DIV+CSs 两边固定宽度-中间自适应宽度

最新推荐文章于 2023-05-12 00:50:30 发布

iteye_1865

最新推荐文章于 2023-05-12 00:50:30 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

分类专栏： html + js + css 文章标签： xhtml

本文链接：https://blog.youkuaiyun.com/iteye_1865/article/details/82614355

html + js + css 专栏收录该内容

50 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>排版</title>
    <style type="text/css">

        body{text-align:center; margin:0px;;}
        #contianer{background-color:#FFFFCC;}
        #header{width:100%; height:50px; background-color:#66FF99;}

        #content{width:100%; height:100px; background-color:#66FFFF;}
        #content_left{width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:left; background-color:#FFFF99;}
        #content_right{width:73px; height:100px; vertical-align:middle; margin-left:-100px; float:right; background-color:#FFFF99;}
        #content_middle{width:auto; height:100px; margin:0 100px; background-color:#0057B9;text-align:center;}

        #footer{width:100%; height:65px; background-color:#FFCCFF;}

    </style>
</head>
<body>
<div id="contianer">
    <div id="header"> 头 </div>

    <div id="content">
       <div id="content_left">   左   </div>

        <div id="content_right">   右   </div>

        <div id="content_middle">   中   </div>
    </div>

    <div id="footer">   脚 </div>
</div>
</body>
</html>