如何将这三个小方框以同样大小放到大框中？

源自：13-9 Relative与Absolute组合使用

如何将这三个小方框以同样大小放到大框中？

<!DOCTYPE HTML>

<html>

<head>

#box1{

width:100px;

height:100px;

padding:10px;

border:1px solid red;

line-height:px;

position:absolute

}

#div1{

width:40%;

height:40%;

border:1px solid;

float:left;

margin:5% 5% 0 5%;

}

#div2{

width:40%;

height:40%;

border:1px solid;

float:right;

margin:5% 5% 5% 5%;

}

#div9{

width:40%;

height:40%;

border:1px solid;

position:absolute;

bottom:10%;

</style>

</head>

<body>

</div>

</body>

</html>

提问者：F_O_T_ground 2016-04-06 20:28

个回答

TMDLife

2016-04-06 21:12:54

已采纳

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
width:100px;
height:100px;

border:1px solid red;


}
#div1{
width:30%;
height:100%;
border:1px solid;
float:left;

}
#div2{

width:30%;
height:100%;
border:1px solid;
float:left;

}
#div9{

width:30%;
height:100%;
border:1px solid;
float:left;

</style>
</head>
<body>
<div id="box1" >
<div id="div1"></div>
<div id="div2"></div>
<div id="div9" align="center">999</div>

</div>
</body>
</html>

0
TMDLife

2016-04-06 21:13:52

嗯,反正按照你的要求,就是这样了. 具体可以百度一下看看有没有更好的方案,3个能占100%的,如果有,请回复让我也长长见识.

0

qq_溜溜_3: 2016-04-06 21:02:34

#box1{
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid red;
    line-height:px;
    position:absolute;
    position:relative;
}
#div2{
     width:40%;
    height:40%;
    border:1px solid;
    float:right;
    margin:5% 5% 5% 5%;
    position:absolute;
}