zoukankan      html  css  js  c++  java
  • 二列布局、三列布局总结

    1,二列布局总结
    <div class="content">
    <div class="left">
    <p>Hello</p>
    <p>I'am left</p>
    </div>
    <div class="right">
    <p>Hi</p>
    <p>I'am right</p>
    </div>
    </div>
    1,.left{
    200px;
    float:left;
    }
    .right{
    margin-left:200px;
    }
    2,
    .content {
    position: relative;
    }

    .left {
    position: absolute;
    background: #fcc;
    200px;
    }

    .right {
    background: #f66;
    margin-left: 210px;
    }
    3,
    .content {
    display: flex;
    }

    .left {
    /* position: absolute; */
    background: #fcc;
    200px;
    }

    .right {
    background: #f66;
    flex: 1;
    }
    4,
    .content {
    100%;
    }

    .left {
    background: #fcc;
    200px;
    float: left
    }

    .right {
    background: #f66;
    overflow: hidden;
    }
    1,三列布局 的样式
    圣杯布局
    <div class="content">
    <div class="main">
    中间自适应区域
    </div>
    <div class="left">
    <p>I'am left</p>
    </div>
    <div class="right">
    <p>I'am right</p>
    </div>
    </div>
    .content {
    padding: 0 200px;
    box-sizing: border-box;
    }

    .main {
    background: #f66;
    100%;
    height: 100px;
    float: left;
    }

    .left {
    background: #fcc;
    200px;
    height: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;

    }

    .right {
    background: #fcc;
    200px;
    height: 100px;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
    }
    双飞翼布局
    <div class="content">
    <div class="main">
    <div class="main_content">
    中间自适应区域
    </div>
    </div>
    <div class="left">
    <p>I'am left</p>
    </div>
    <div class="right">
    <p>I'am right</p>
    </div>
    </div>
    css的布局
    .content{
    100%;
    box-sizing:border-box;
    }
    .main{
    100%;
    float:left;
    }
    .main_content{
    margin:0 200px;
    }
    .left{
    200px;
    float:left;
    margin-left:-100%;
    }
    .right{
    200px;
    float:left;
    margin-left:-200px;
    }
    3,flex
    父级元素设置:display:flex,
    设计宽段设置宽度
    自使用的使用:flex:1
    4,postion:
    5,使用float
    页面上:
    <div class="content">
    <div class="left">
    <p>I'am left</p>
    </div>

    <div class="right">
    <p>I'am right</p>
    </div>
    <div class="main">
    中间自适应区域
    </div>
    </div>

    css的样式
    .left{
    float:left;
    200px;
    }
    .right{
    float:right;
    200px;
    }
    .main{
    margin:0 200px;

    }
    6 BFC
    固定的宽度设置float:left;
    自适应的设置:overflow:hidden;
  • 相关阅读:
    李白—烂尾楼题记
    [原创]网络图片延迟加载实现,超越jquery2010年3月26日
    利用反射,泛型,扩展方法快速获取表单值到实体类
    断点续传 到底是很么
    认识LINQ
    Gridview控件用法大总结
    网站性能优化总结。
    JQ小技巧
    自己写的jq_3个小插件
    MOSS中SPuser类的使用
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9629768.html
Copyright © 2011-2022 走看看