Question

我有一个带有htm代码的htm文件：

<div id="masthead">
    <div id="logo">
        #logo<br />
        #logo<br />
        #logo</div>
    <div id="header">
        #header<br />
        #header<br />
        #header</div>
</div>
<div id="container">
    <div id="right_col">
        #right_col<br />
        #right_col<br />
        #right_col<br />
        #right_col<br />
        #right_col</div>
    <div id="top_banner">
        #top_banner<br />
        #top_banner<br />
        #top_banner<br />
        #top_banner</div>
    <div id="left_col">
        #left_col<br />
        #left_col<br />
        #left_col<br />
        #left_col<br />
        #left_col</div>
    <div id="page_content">
        #page_content<br />
        #page_content<br />
        #page_content<br />
        #page_content</div>
</div>
<div id="footer">
    #footer <br />
    #footer <br />
    #footer <br />
    #footer </div>

并有一个css文件：

/* CSS layout */
body {
    margin: 0;
    padding: 0;
    background-color:silver;
    font-family:tahoma;
}

#masthead {
    min-width: 1000px;
}

#logo {
    float: right;
    background-color:lime;
    width: 250px;
}

#header {
    margin-right:250px;
    background-color:aqua;
}

#container {
    clear: both;
    min-width: 1000px;
}

#left_col {
    float: left;
    width: 200px;
    background-color:fuchsia;


}

#right_col {
    float: right;
    width: 200px;
    background-color:orange;
    }

#page_content {
    margin-left: 200px;
    margin-right: 200px;
    background-color:red;


}

#top_banner {
    margin-right: 200px;
    background-color:maroon;

}

#footer {
    clear: both;
    background-color:yellow;
}

我的html文件样式正确加载。但现在我需要更改html代码并移动left_col和page_content div。我需要在html中的page_content之后加载left_col。

这是这两个div的新顺序。

    <div id="page_content">
    #page_content<br />
    #page_content<br />
    #page_content<br />
    #page_content</div>
        <div id="left_col">
    #left_col<br />
    #left_col<br />
    #left_col<br />
    #left_col<br />
    #left_col</div>

但是现在我的html页面没有正确加载而left_col像这张图片一样加载：

http://i56.tinypic.com/2z9cn6q.png

Answer 1

看看这个小提琴：http://jsfiddle.net/anish/FzfwG/

在html中更改div顺序

1 个答案: