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

最新推荐文章于 2023-12-21 20:36:01 发布

丶Seven

最新推荐文章于 2023-12-21 20:36:01 发布

阅读量5.3k

点赞数 4

分类专栏： WEB前端

本文链接：https://blog.csdn.net/Miss_kun/article/details/52064577

版权

WEB前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

直接看代码和效果图：

代码片段：

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

效果图：