要想做這樣一個(gè)盒子怎么寫(xiě)？div{width：1000px;height:600px;}div1{width:300px;height:550px;float:left;}?
6 回答
威威威威
一朵大白天
TA貢獻(xiàn)54條經(jīng)驗(yàn) 獲得超14個(gè)贊
<!DOCTYPE?html>
<html>
<head>
<title>HTML里div的嵌套</title>
<style?type="text/css">
.div,.div1,.div2,.div3{
margin:10px;
border:1px?solid?#000;
}
.div{
width:?300px;
height:230px;
}
.div1{
width:?100px;
height:?200px;
float:?left;
}
.div2{
height:?100px;
width:?145px;
float:?left;
}
.div3{
width:?145px;
height:?80px;
float:?left;
}
</style>
</head>
<body>
<div?class='div'>
<div?class='div1'></div>
<div?class='div2'></div>
<div?class='div3'></div>
</div>
</body>
</html>
Sky_shine
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
<div?class="row"> ????<div?class="div1"><div> ????<div> ???????<div?class="div2"></div> ????????<div?class="div3"></div> ????</div> </div>
GavinZeng
TA貢獻(xiàn)31條經(jīng)驗(yàn) 獲得超20個(gè)贊
實(shí)現(xiàn)思路：div內(nèi)部，div1 左浮動(dòng)，div2和div3右浮動(dòng)。然后為了不干涉其他元素要清除浮動(dòng)
參考代碼：
CSS部分：
.div{
????width:?300px;
????height:?300px;
????border:?1px?solid?black;
????padding:?10px;
}
.div1{
????width:?100px;
????height:?300px;
????float:?left;
????border:?1px?solid?black;
????margin-right:?10px;
}
.div2{
????width:?184px;
????min-height:?144px;
????border:?1px?solid?black;
????margin-bottom:?10px;
????float:?right;
}
//清除浮動(dòng)，這里使用了偽類(lèi):after
.div1:after,div2:after{
????content:"";
????display:?block;
????clear:?both;
????overflow:?hidden;
}HTML部分：
<div?class="div"> ????<div?class="div1">div1</div> ????<div?class="div2">div2</div> ????<div?class="div2">div3</div> </div>
慕渣渣
TA貢獻(xiàn)10條經(jīng)驗(yàn) 獲得超2個(gè)贊
可以用浮動(dòng)布局。記得清除浮動(dòng)，也就是在浮動(dòng)元素的父元素上加一個(gè)清除的類(lèi)，一般是clearfix，當(dāng)然clearfix怎么寫(xiě)可以上網(wǎng)查。
添加回答
舉報(bào)
0/150
提交
取消