Question

html 三个div如何排成左二右一

div 左边两个div竖排，宽度都是80%，上面那个的高度为600px，下面那个的高度随着内容的改变。右边一个div占宽20%高度随内容

Answer 1

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>

Answer 2

<style>
    .d1 {
        float:left;
        background-color:yellow
    }
    .d2 {
        float:left;
        background-color:green
    }
    .d3 {float:right;
        background-color:red
    }
</style>

<div class="d1">div1</div>
<div class="d2">div2</div>
<div class="d3">div3</div>

<p>注：建议你仔细看“网海1书生”回答的那个答案，他写的那个比较详尽，更有助于你学习，我这个也算可以用，但写的比较“简陋”，没有对比，就没有伤害~</p>

Answer 3

如果是移动端这种排版会有问题的 右侧的20%在最小分辨率320px下 就没有多少了
不考虑合理的话 左边两个都80%肯定不行 如果没有边距三个div应为40% 40% 20%

Answer 4

<style>
.left{widht:32%;float:left;}

.right{widht:32%;float:right;}

</style>
<div class = "left"></div><div class = "left"></div><div class = "right"></div>