div+Css三列布局中的一个小问题

来源：互联网发布：淘宝客源码免费下载编辑：程序博客网时间：2024/05/16 18:45

做Web标准设计的兄弟走了。以后前台设计这块，自己也要了解一些了，今天学习了一个Css+div在看到三列布局的时候，出现了一件怪事。就是三列中的一列会出问题，我现在把现问题的代码和图片放上来。

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="cssDemo._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        body        {            font-size: 18px;            line-height: 200%;            margin: 0;        }        #contents        {            width: 800px;            margin: auto;        }        #picDiv        {            float: left;            width: 202px;        }        #leftDiv        {            background: #99ff99;            float: left;            width: 120px;            height: 300px;        }        #rightDiv        {            background: #99ff99;            float: right;            width: 120px;            height: 300px;        }        #mainDiv        {            height: 300px;            margin: 0 120px;        }    </style></head><body>    <form id="form1" runat="server">    <div id="leftDiv">        左边    </div>    <div id="mainDiv">        <div id="picDiv">            <img src="1.jpg" width="192" height="142" />        </div>        <div id="PiccontentDiv">            6月5日上午消息，今日有报道称小米为引入腾讯战略投资，准备放弃与微信有竞争关系的米聊，对此小米相关负责人予以坚决否认。此外另有消息称小米已获DST新一轮投资，估值已达40亿美元，但未获小米官方证实。            今日早间出现的一篇未署名的报道中称，小米将在未来的融资中引入腾讯作为战略投资者，但双方牵手的前提条件是小米“放弃米聊”。 对此，小米官方和米聊方面在接受新浪科技连线时，均予以坚决否认。小米方面称米聊是小米移动互联网战略的重要产品，“小米不可能放弃米聊，就像小米身体的一部分一样”。此外，米聊称目前其注册用户已接近1500万，且增长非常健康。        </div>    </div>    <div id="rightDiv">        右边    </div>    </form></body></html>

切图

我想这一定不是大家需求的，为了这个问题，我找了半天，也没有找到为什么，后来，在一个偶然的机会下，我调整了一下div的顺序，他就好。

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="cssDemo._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title></title>    <style type="text/css">        body        {            font-size: 18px;            line-height: 200%;                        margin:0;        }                #contents{            width:800px;            margin:auto;        }                #picDiv        {            float:left;            width:202px;        }        #leftDiv        {            background:#99ff99;            float:left;            width:120px;            height:300px;        }        #rightDiv{            background:#99ff99;            float:right;            width:120px;            height:300px;        }        #mainDiv{          height:300px;          margin:0 120px;        }    </style></head><body>    <form id="form1" runat="server">    <div id="contents">        <div id="rightDiv">            右边        </div>        <div id="leftDiv">            左边        </div>        <div id="mainDiv">            <div id="picDiv">                <img src="1.jpg" width="192" height="142" />            </div>            <div id="PiccontentDiv">                6月5日上午消息，今日有报道称小米为引入腾讯战略投资，准备放弃与微信有竞争关系的米聊，对此小米相关负责人予以坚决否认。此外另有消息称小米已获DST新一轮投资，估值已达40亿美元，但未获小米官方证实。　　今日早间出现的一篇未署名的报道中称，小米将在未来的融资中引入腾讯作为战略投资者，但双方牵手的前提条件是小米“放弃米聊”。　　对此，小米官方和米聊方面在接受新浪科技连线时，均予以坚决否认。小米方面称米聊是小米移动互联网战略的重要产品，“小米不可能放弃米聊，就像小米身体的一部分一样”。此外，米聊称目前其注册用户已接近1500万，且增长非常健康。            </div>        </div>    </div>    </form></body></html>

图：

大家看到区别了吗。也就是说，三个层的位置是有顺序的，

左右层必须在中间层的上面，才会正常显示。哈哈………………