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

Question

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

Answer 1

12345678910111213141516171819<style>&nbsp;&nbsp;&nbsp;&nbsp;.d1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:left;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:yellow&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.d2&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:left;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:green&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;.d3&nbsp;{float:right;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:red&nbsp;&nbsp;&nbsp;&nbsp;}</style>&nbsp;<div&nbsp;class="d1">div1</div><div&nbsp;class="d2">div2</div><div&nbsp;class="d3">div3</div>&nbsp;<p>注：建议你仔细看“网海1书生”回答的那个答案，他写的那个比较详尽，更有助于你学习，我这个也算可以用，但写的比较“简陋”，没有对比，就没有伤害~</p>

Answer 2

1、浮动布局：12345678910<style>html,body{margin:0;&nbsp;padding:0}.div1&nbsp;{float:left;&nbsp;width:80%;&nbsp;height:600px;&nbsp;background-color:red}.div2&nbsp;{float:left;&nbsp;width:80%;&nbsp;background-color:green}.div3&nbsp;{float:right;&nbsp;width:20%;&nbsp;background-color:blue}</style><div&nbsp;class="div1">宽80%，高600px</div><div&nbsp;class="div3">宽20%，高随内容</div><div&nbsp;class="div2">宽80%，高随内容</div><br&nbsp;style="clear:both"/>2、绝对定位：123456789<style>html,body{margin:0;&nbsp;padding:0}.div1&nbsp;{position:absolute;&nbsp;left:0;&nbsp;top:0;&nbsp;width:80%;&nbsp;height:600px;&nbsp;background-color:red}.div2&nbsp;{position:absolute;&nbsp;left:0;&nbsp;top:600px;&nbsp;width:80%;&nbsp;background-color:green}.div3&nbsp;{position:absolute;&nbsp;right:0;&nbsp;top:0;&nbsp;width:20%;&nbsp;background-color:blue}</style><div&nbsp;class="div1">宽80%，高600px</div><div&nbsp;class="div2">宽80%，高随内容</div><div&nbsp;class="div3">宽20%，高随内容</div>3、flex布局：123456789101112131415<style>html,body{margin:0;&nbsp;padding:0}.box&nbsp;{display:flex;&nbsp;align-items:flex-start}.left&nbsp;{display:flex;&nbsp;flex-direction:column;&nbsp;flex:0&nbsp;1&nbsp;80%}.div1&nbsp;{flex:0&nbsp;1&nbsp;600px;&nbsp;background-color:red}.div2&nbsp;{flex:auto;&nbsp;background-color:green}.right&nbsp;{flex:auto;&nbsp;background-color:blue}</style><div&nbsp;class="box">&nbsp;&nbsp;&nbsp;<div&nbsp;class="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div1">宽80%，高600px</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div2">宽80%，高随内容</div>&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;<div&nbsp;class="right">宽20%，高随内容</div></div>