码迷,mamicode.com
首页 > 其他好文 > 详细

在谈浮动

时间:2018-09-06 18:07:14      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:tle   传统   cti   两种   ide   没有   link   width   min   

浮动只适合pc端

 margin 0 auto; //左右俩边自动推进.

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>CSS传统布局[上]</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

  <header>
    header
  </header>

  <aside>
    aside
  </aside>

  <section>
    section
  </section>

  <footer>
    footer
  </footer>

</body>

 

@charset "utf-8";
body {
    margin: 0 auto;
    /*width: 960px;*/
    width: auto;
}
header {
    height: 120px;    //因为body添加了宽度,这边自适应不用添加.
    background-color: olive;
}
aside {
    /*width: 200px;*/      //两种方式下面是流布局
    width: 20%;
    /*min-width: 120px;*/   
    height: 500px;   
    background-color: purple;
    float: left;        //添加folat是没有宽度的,所以要加width
}
section {
    /*width: 760px;*/
    width: 80%;
    height: 500px;
    background-color: maroon;
    float: right;  //如果不添加float 则会重叠, 所以要添加.
}
footer {
    height: 120px;
    background-color: gray;
    clear: both;   //  要么添加浮动,要么去用clear去除浮动
}

 

在谈浮动

标签:tle   传统   cti   两种   ide   没有   link   width   min   

原文地址:https://www.cnblogs.com/ningjie/p/9599210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!