布局一 两列自适应布局

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>两列自适应布局</title>
          <style type="text/css">
　　　　.out{
　　　　　　width: 90%;
　　　　　　height: 500px;
　　　　　　margin: 0 auto;
　　　　　　background: yellow;
　　　　　}
　　　　.left{
　　　　　　width: 20%;
　　　　　　background: blue;
　　　　　　float: left;
　　　　　　height: 500px;
　　　　　}
　　　　.right{
　　　　　　width: 80%;
　　　　　　background: red;
　　　　　　float: left;
　　　　　　height: 500px;
　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="out">
　　　　　　<div class="left"></div>
　　　　　　<div class="right"></div>
　　　　</div>
　　</body>
</html>

posted @ 2017-07-13 13:36  鱼樱前端  阅读(156)  评论(0)  编辑  收藏  举报