css - 在html中更改div顺序

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。

这是这 2 个 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

看看这个 fiddle :http://jsfiddle.net/anish/FzfwG/