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

Question

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

Answer 1

12345678910111213141516171819

<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 2

1、浮动布局：

12345678910

<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、绝对定位：

123456789

<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布局：

123456789101112131415

<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>