Flow、Position、Flexbox实现的布局

1、实现一个两栏布局，左侧占30%宽度，右侧占70%宽度（使用float）

如下图所示

我用了浮动 float : left ;

<p>1、实现一个两栏布局，左侧占30%宽度，右侧占70%宽度</p>
<div style="width: 100%;height: 75px;">
    <div style="float: left;width: 30%;height: inherit;background-color: red">
        <!--float：left；width：30%-->
       <!--<br> 父div固定了width: 100%;height: 75px;-->
    </div>
    <div style="float: left;width: 70%;height: inherit;background-color: #00bbee">
        <!--..float：left；width：70%-->
    </div>
</div>

2、实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化（float+margin）

效果图如下：

左侧：width=30%,height=75px；float= left

右侧：margin-right: 0px;margin-left: 30%;height: inherit

右侧通过定义margin外边框的与左边距离，与右边的距离，自适应变化

代码如下

<p>2、实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化</p>
<div style="width: 100%;height: 75px;">
    <div style="background-color: #00ee00;width: 30%;height: inherit;float: left">
        <!--左侧 width:30%;float:left;-->
    </div>
    <div style="background-color: rgba(235,212,21,0.6);margin-right: 0px;margin-left: 30%;height: inherit">
        <!--右侧没有用float语句，用了 margin-right: 0px;margin-left: 30%;(实现自适应)-->
    </div>
</div>

3、实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化（position）

( 设置了position:absolute要结合right,left,top,bottom使用 )

效果图如下：

最外层的div，即父div要position:relative，这样子div会在父div的范围内定位。子div要设置position:absolute

父div：width=100%；height=75px；position=relative

子div：

左侧div：height: inherit;position: absolute;right: 30%;top: 0px ;left: 0px;

右侧div：width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;

代码如下

<p>3、实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化</p>
<div style="width: 100%;height: 75px;position: relative">
    <div style="height: inherit;position: absolute;right: 30%;
    top: 0px;left:0px;border: rgba(235,86,168,0.6) 2px solid">
        <!--左侧自适应浏览器宽度position: absolute;right: 30%; top: 0px;left:0px;，<br>-->
        <!--父div必须为position:relative；这样子div，即左侧与右侧的div会在父div内定为-->
    </div>
    <div style="width: 30%;height: inherit;position: absolute;right: 0px;top: 0px;border: black 1px double">
        <!--右侧固定为width: 30%;height: inherit;-->
    </div>
</div>

4、实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变

(flow+position+margin)

（ flow分为块元素、行内元素）

效果图

代码如下

html

<p>4、实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化</p>
<div style="width: 100%;height: 75px;position: relative">
    <div id="left"><!--左侧固定width=30%   背景=red--></div>
    <div id="middle">
        <!--中间自适应-->
    </div>
    <div id="right">
        <!--右侧固定width=30%   背景=red-->
    </div>
</div>

css

<style>
        #left,#right,#middle{
            display: inline-block;/*行内块元素*/
            height: 75px;
            position: absolute;
            top: 0px;
        }
        #left{
            width: 30%;
            margin-left: 0px;
            left: 0px;
            background-color: #00ee00;
        }
        #middle{
            background-color: rgba(17,235,137,0.6);
            left: 30%;
            right: 30%;
        }
        #right{
            width: 30%;
            right: 0%;
            background-color: rgba(140,60,235,0.6);
            margin-right: 0px;
        }
</style>

5、实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化 ( flexBox )

这个需要你自己去查一下，我对这个属性还不太明白

效果图：

父元素要使用display:flex ; flex-direction：row | column | row-reverse | column-reverse

代码如下：

html

<p>5、实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化</p>
<div style="width: 100%;height: 75px;display: flex" class="fartherBox">
    <div class="left">
        <!--左侧固定-->
    </div>
    <div class="middle">
        <!--中间固定-->
    </div>
    <div class="right">
        <!--右侧自适应-->
    </div>
</div>

css

<style> 
#fartherBox{
            width: 100%;
            height: 75px;
            display: flex;
            flex-direction: row;/*它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排*/
        }
        .left{
            background-color: rgba(203,74,43,0.6);
            width: 30%;
            height: inherit;
            -webkit-box-flex:   2.0;
            -moz-box-flex: 2.0;
        }
        .middle{
            background-color: rgba(132,135,235,0.6);
            width: 30%;
            height: inherit;
            -webkit-box-flex:   1.0;
            -moz-box-flex: 1.0;
        }
        .right{
            border: rgba(20,10,3,0.6) 2px dotted;
            height: inherit;
            flex: auto;/*动态尺寸*/
        }
    </style>

Flow、Position、Flexbox实现的布局

猜你喜欢