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"> </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"> </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"> </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"> </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"> </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布局成下图所示
<style>
.columns{width:45%;float:left}
</style>
912643545 加我qq 教你
没仔细看代码，只看了具体需求，
大概可以写个css样式……
<!DOCTYPE html>
Title
<br> .inner{<br> width: 45%;<br> display: inline-block;<br> margin: 2%;<br> height: 300px;<br> background-color: #EEEEEE;</p> <pre><code> } </style> </code></pre> <p></head><br> <body><br> <div style="width: 100%;"><br> <div style="width: 100%;height: 300px;background-color: #bce8f1;margin: 2%"></div><br> <div class="inner"></div><br> <div class="inner"></div><br> <div class="inner"></div><br> <div class="inner"></div><br> </div></p> <p></body><br> </html></p>
在你的dev加上这句话，dev{
z-index:1;
}
记住数字越大，就越在上面。1再底下。2在1上面，3在2上面，以此类推