要想做這樣一個盒子怎么寫？div{width：1000px;height:600px;}div1{width:300px;height:550px;float:left;}?
6 回答
威威威威
一朵大白天
TA貢獻54條經驗 獲得超14個贊
<!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貢獻1條經驗 獲得超0個贊
<div?class="row"> ????<div?class="div1"><div> ????<div> ???????<div?class="div2"></div> ????????<div?class="div3"></div> ????</div> </div>
GavinZeng
TA貢獻31條經驗 獲得超20個贊
實現思路：div內部，div1 左浮動，div2和div3右浮動。然后為了不干涉其他元素要清除浮動
參考代碼：
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;
}
//清除浮動，這里使用了偽類: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>
- 6 回答
- 2 關注
- 5139 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消