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

来源:13-9 Relative与Absolute组合使用

F_O_T_ground

2016-04-06 20:28

<!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;

    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 id="box1" >

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div9" align="center">999</div>

</div>

</body>

</html>


写回答 关注

3回答

  • 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>


    TMDLif... 回复F_O_T_...

    不客气 :)

    2016-04-11 11:09:12

    共 2 条回复 >

  • TMDLife
    2016-04-06 21:13:52

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

  • 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;
    }


初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1226743 学习 · 18245 问题

查看课程

相似问题