不知道是不是这个效果，代码：
<div style="width:200pxheight:500pxborder:1px solid #f00float:left"></div>
<div style="width:800pxfloat:left">
<div style="width:300pxheight:200pxborder:1px solid #f00float:left"></div>
<div style="width:300pxheight:200pxborder:1px solid #f00float:left"></div>
<div style="width:300pxheight:200pxborder:1px solid #f00float:left"></div>
<div style="width:300pxheight:200pxborder:1px solid #f00float:left"></div>
<div style="width:600pxheight:200pxborder:1px solid #f00float:left"></div>
</div>
设置div样式 z-index:auto
auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。
前提是div是定位元素代码实例如下：
1、<html>
2、 <body>
3、<style type="text/css">
3、.div1{ width: 200px height: 100px background: red float: left }
5、.div2{ width: 300px height: 350px background: yellow }
6、</style>
7、 <div class="div1"></div>
8、<div class="div2"></div>
9、 </body>
10、</html>
扩展资料
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。
标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
参考资料
百度百科-html
您试下这段代码。
<div style="width: 500px">
<div style="float:leftwidth: 248pxborder: 1px solid #fcc">kdjfkdfieiorerueiurierer</div>
<div style="float: rightwidth: 248pxborder: 1px solid #000099">sdiweiweiwueiwieuiwee</div>
<div style="clear:both"></div>
</div>
当出现左右两列的时候，其中一个办法是：一个向左浮动，一个向右浮动，浮动完了之后，记得清除，这样就不会出错了。希望能给您解决问题。
满意请采纳。
