阿里笔试16前端布局

来源：互联网发布：三星电视遥控器软件编辑：程序博客网时间：2024/06/06 03:54

实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200px

<!DOCTYPE HTML ><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{margin:0;            padding:0}        #content {width:800px;margin: 10px auto}        #header {border:solid 1px green;height:70px;position: relative}        #logo {margin:10px ;float:left;border:solid 1px red;height:50px;width: 50px;}        #userinfo { position:absolute;border:1px solid #191919;right:10px;bottom:10px;width:140px;text-align:right}        .main {margin-top:10px;margin-bottom:10px}        aside {height:100px;border:1px solid red;width:200px;float: right}        #content2 {height:300px;border:1px solid blue;margin-right:208px;}        footer {border:1px solid #191919;margin-bottom:0;}    </style></head><body><div id="content">    <div id="header">        <div id="logo">LOGO</div>        <div id="userinfo">用户名</div>    </div>    <div class="main">        <aside>aside 定宽200</aside>        <div id="content2">content自适应宽度</div>    </div>    <footer>        footer    </footer></div></body></html>

方法二（摘）：

body {    margin: 0;}.fn-clear:after {    content: " ";    clear: both;    display: block;    font-size: 0;    visibility: hidden;    height: 0;}.fn-clear {    zoom: 1;}.container {    padding: 10px;}.header {    background: #eee;    position: relative;    margin-bottom: 10px;}.logo {    width: 100px;    height: 100px;    float: left;    background: #f60;}.username {    position: absolute;    right: 10px;    bottom: 10px;}.main {    margin-bottom: 10px;}.side-bar {    width: 200px;    float: right;    background: #ccc;}.content {    margin-right: 200px;    background: #f6f6f6;}.footer {    background: #999;}

<div class="container">        <div class="header fn-clear">            <div class="logo">logo</div>            <div  class="username">zhoumingXXX@163.com</div>        </div>        <div class="main">            <div  class="side-bar">menu</div>            <div class="content">左侧内容</div>        </div>        <div class="footer">            footer        </div></div>

由于floar会导致父元素不能被撑开，所以用伪类（非IE）；IEhack 用zoom

详见：clear

zomm

那些年我们清除的浮动

0 0