zoukankan      html  css  js  c++  java
  • float浮动定位

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>float浮动定位</title>
    <style>
    div{
    100px;
    height:100px;
    border:1px #000000 solid;
    }
    .div1{
    background:darkred;
    }
    .div2{
    background:green;
    /*float:left;
    margin-left:10px;*/
    /*float浮动的位置只能用margin去调*/
    }
    .div3{
    background:royalblue;
    }
    /*#box div*/.div1,.div2,.div3{
    float:left;/*水平方向定位left ight one*/
    }
    /*#box{
    306px;
    }*/
    /*三个子元素div的总宽度+border,如果宽度不够,子元素浮动是上不去的*/
    .text{
    400px;
    height:200px;
    }
    </style>
    </head>
    <body>
    <h1>你们好吗</h1>
    <!--<div id="box">-->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <!--</div>-->
    <h1 style="clear:both"></h1><!--从这开始清除浮动,别对下面的内容有影响,用任何块级元素都可以。或者给浮动的元素加父元素,给父元素加宽高,因为外面的父元素不会浮动起来,如上-->
    <div class="text">这节课我们学习浮动的定位,如果用了浮动就会对下面的元素产生影响,如果不想有影响就用以上两种方式清除浮动</div>
    </body>
    </html>

  • 相关阅读:
    福大软工1816 · 第五次作业
    福大软工1816 · 第四次作业
    第三次作业
    福大软工1816 · 第二次作业
    培养孩子应知的30个细节
    人力资源六大模块
    中小学班主任工作规定
    事业单位笔试题
    班级管理
    Leetcode 7 反转整数
  • 原文地址:https://www.cnblogs.com/benbenma/p/7169579.html
Copyright © 2011-2022 走看看