要想做这样一个盒子怎么写？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 关注
- 5136 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消