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 > |
素胚勾勒不出你
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 > |
- 2 回答
- 0 关注
- 1029 浏览
添加回答
举报
0/150
提交
取消