div+Css三列布局中的一个小问题_三个div一个在前面两个小的在后边并列-CSDN博客

本文链接：https://blog.csdn.net/chenguang79/article/details/7634228

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

图：