一张图学懂css+div 浮动分块

来源：互联网发布：xampp mysql登陆编辑：程序博客网时间：2024/05/18 20:07

直接看代码和效果图：

代码片段：

<table style="margin:auto;width:900px;height:430px">    <tr>        <td>            <div id="bigBox"  style="margin:auto;width:890px;height:430px">                <div id="top_left" style="background-color:blue; float:left; width:340px;height:165px">                    Email                </div>                <div id="top_right" style="background-color:red; float:right; width:525px;height:340px;margin-left:16px">                    Liuyanban                </div>                <div id="middle" style="float:left;width:340px;height:153px;margin-top:20px">                    <div id="middle_left" style="background-color:purple; float:left; width:162px;height:153px;">                    QQ                    </div>                    <div id="middle_middle" style="background-color:green; float:right; width:162px;height:153px;">                        login                    </div>                </div>                <div id="buttom_left" style="background-color:orange; float:left; width:340px;height:65px;margin-top:16px">                    share                </div>                <div id="buttom_right" style="background-color:darkblue; float:right; width:525px;height:65px;margin-top:16px;margin-left:16px">                    friengLink                </div>            </div>        </td>    </tr></table>

效果图：

0 0