为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

缥缈止盈 2019-02-13 15:11:14
html 三个div如何排成左二右一
查看完整描述

2 回答

?
婷婷同学_

TA贡献1844条经验 获得超8个赞

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>


查看完整回答
反对 回复 2019-03-03
?
素胚勾勒不出你

TA贡献1827条经验 获得超9个赞

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>



查看完整回答
反对 回复 2019-03-03
  • 2 回答
  • 0 关注
  • 1029 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信