各种经典布局--“国”字布局

最新推荐文章于 2022-11-19 23:40:54 发布

weixin_33769207

最新推荐文章于 2022-11-19 23:40:54 发布

阅读量1.7k

点赞数 1

文章标签： python

原文链接：https://my.oschina.net/AnymoreCoder/blog/743674

版权

2019独角兽企业重金招聘Python工程师标准>>>

目前只有一个div框把布局切好了，里面暂无任何元素。 html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>"国"字布局</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>
  <div id="wrap">
      <div id="header"></div>
      <div id="main-content">
          <div id="left-sidebar">1</div>
          <div id="content-area">2</div>
          <div id="right-sidebar">3</div>
      </div>
      <div id="footer"></div>
  </div>
</body>
</html>

css:

body{
    margin: 0;
    padding: 0;
}
#wrap{
    width: 100%;
    height: auto;
}
#header{
    width: 100%;
    height: 10em;
}
#main-content{
    width: auto;
    height: auto;
}
#left-sidebar{
    display: inline;
    float: left;
    width: 20%;
    height: 35em;
}
#content-area{
    display: inline;
    float: left;
    width: 50%;
    height: 35em;
}
#right-sidebar{
    display: inline;
    float: left;
    width: 20%;
    height: 35em;
}
#footer{
    clear:both;
    width: 100%;
    height: 10em;

}

转载于:https://my.oschina.net/AnymoreCoder/blog/743674