html布局的常用的四种实现方式

需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：

第二种：绝对定位（position:absolute）

设置父盒子position:relative（相对定位），

三个子盒子position：absolute,

左盒子left:0,

右盒子right:0

中间盒子left:300pxright:300px

第三种：flex布局

父盒子 display:flex

左右盒子设置宽度：300px

中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

第四种：grid布局

父盒子display: grid

grid-template-columns:300px auto 300px(分割成3列，宽度分别为300px auto 300px)

grid-template-rows:100px(占一行，行高100px)

刚才看错了 你这颜色选得，我辨色能力没那么强。左右布局的div两个加一起的宽度不能大于父容器的宽度，要不然会出现换行的现象的。

#div_aside {

    float: left

    width: 20%

    height: 100%

    background-color: aliceblue

}

#div_general_report {

    float:left

    width:80%

    height:100%

    background-color: aqua

}

这样就行了

1、浮动布局：

<style>

html,body{margin:0 padding:0}

.div1 {float:left width:80% height:600px background-color:red}

.div2 {float:left width:80% background-color:green}

.div3 {float:right width:20% background-color:blue}

</style>

<div class="div1">宽80%，高600px</div>

<div class="div3">宽20%，高随内容</div>

<div class="div2">宽80%，高随内容</div>

<br style="clear:both"/>

2、绝对定位：

<style>

html,body{margin:0 padding:0}

.div1 {position:absolute left:0 top:0 width:80% height:600px background-color:red}

.div2 {position:absolute left:0 top:600px width:80% background-color:green}

.div3 {position:absolute right:0 top:0 width:20% background-color:blue}

</style>

<div class="div1">宽80%，高600px</div>

<div class="div2">宽80%，高随内容</div>

<div class="div3">宽20%，高随内容</div>

3、flex布局：

<style>

html,body{margin:0 padding:0}

.box {display:flex align-items:flex-start}

.left {display:flex flex-direction:column flex:0 1 80%}

.div1 {flex:0 1 600px background-color:red}

.div2 {flex:auto background-color:green}

.right {flex:auto background-color:blue}

</style>

<div class="box">

   <div class="left">

      <div class="div1">宽80%，高600px</div>

      <div class="div2">宽80%，高随内容</div>

   </div>

   <div class="right">宽20%，高随内容</div>

</div>

---