my_00 2016-08-24 13:01 采纳率: 0%
浏览 2643

html页面多个div如何布局。在线等,谢谢啦!

html代码如下:

 <body class="hold-transition skin-blue sidebar-mini">
        <div class="wrapper">
            <div class="content-wrapper">
                <!-- Main content -->
            <section class="content">
                <div class="row" >
                    <div class="col-xs-12" >
                    <div class="box">
                            <!-- /.box-header -->
                            <div class="box-body">
                                <table id="example2" class="table table-striped  table-hover">
                                    <thead class="welcome-message">
                                        <tr><td><span style="margin-left: 32px;">欢迎您</span></td></tr>
                                        <tr>
                                            <td><img src="img/img_1.jpg" style="float: left;margin-left: 32px;margin-right: 42px;"/><span style="font-size: 12px;color:#676A6C;line-height:32px;font-weight:normal">&nbsp;&nbsp;</span>
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody id="list" class="welcome-message">


                                    </tbody>
                                    <tfoot></tfoot>

                            </table>
                            </div>

                        </div>


                    <div class="box columns" id="columns" >
                            <!-- /.box-header -->
                            <div class="box-body" style="float: ">
                                <table id="example2" class="table table-striped  table-hover">
                                    <thead class="welcome-message">
                                        <tr>
                                            <td><img src="img/i_2.jpg" style="float: left;margin-left: 32px;margin-right: 42px;"/><span style="font-size: 12px;color:#676A6C;line-height:32px;font-weight:normal">&nbsp;&nbsp;</span>
                                            </td>
                                            <td>
                                                数据动态
                                            </td>
                                        </tr>
                                    </thead>

                                    <tbody id="list" class="welcome-message">


                                    </tbody>
                                    <tfoot></tfoot>

                            </table>

                            </div>


                        </div>

                    <div class="box columns" style="">
                            <!-- /.box-header -->
                            <div class="box-body" >
                                <table id="example2" class="table table-striped  table-hover">
                                    <thead class="welcome-message">
                                        <tr>
                                            <td><img src="img/i_1.jpg" style="float: left;margin-left: 32px;margin-right: 42px;"/><span style="font-size: 12px;color:#676A6C;line-height:32px;font-weight:normal">&nbsp;&nbsp;</span>
                                            </td>
                                            <td>
                                                工作动态
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody id="list" class="welcome-message">


                                    </tbody>
                                    <tfoot></tfoot>

                            </table>
                            </div>

                        </div>


                        <div class="box columns" >
                            <!-- /.box-header -->
                            <div class="box-body" >
                                <table id="example2" class="table table-striped  table-hover">
                                    <thead class="welcome-message">
                                        <tr>
                                            <td><img src="img/i_4.jpg" style="float: left;margin-left: 32px;margin-right: 42px;"/><span style="font-size: 12px;color:#676A6C;line-height:32px;font-weight:normal">&nbsp;&nbsp;</span>
                                            </td>
                                            <td>
                                                数据播报
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody id="list" class="welcome-message">


                                    </tbody>
                                    <tfoot></tfoot>

                            </table>
                            </div>

                        </div>

                        <div class="box columns" >
                            <!-- /.box-header -->
                            <div class="box-body" >
                                <table id="example2" class="table table-striped  table-hover" >
                                    <thead class="welcome-message" >
                                        <tr>
                                            <td><img src="img/i_3.jpg" style="float: left;margin-left: 32px;margin-right: 42px;"/><span style="font-size: 12px;color:#676A6C;line-height:32px;font-weight:normal">&nbsp;&nbsp;</span>
                                            </td>
                                            <td>
                                                工作播报
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody id="list" class="welcome-message">


                                    </tbody>
                                    <tfoot></tfoot>

                            </table>
                            </div>

                        </div>

                </div>
                </div>

            </section>
            </div>
        </div>
    </body>

问题:如何将div布局成下图所示

图片说明

  • 写回答

6条回答 默认 最新

报告相同问题?

悬赏问题

  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面,是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差(基于双目相机)
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号