Question

如果标记中div的顺序必须如下，那么如何使用纯CSS实现如何实现下图所示的布局？

注意 - 每个面板的高度未知;包装器div可以添加到标记

<body>
  <div id="content"></div>
  <div id="nav"></div>
  <div id="search-results"></div>
</body>

Layout puzzle

Answer 1

这项技术取自这个问题 Make a div display under another using CSS in a totally fluid layout

它使用显示：table family属性的CSS表格演示来重新排列dom元素的呈现顺序。

如上述问题所述：

这适用于所有现代浏览器，如果您小心，则适用于IE8。确实如此在IE6 / 7中不起作用。

<强> HTML

<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">content</div>
    </div>
    <div id="nav-search-block">
        <div id="nav-wrapper">
            <div id="nav">nav</div>
        </div>
        <div id="search-results-wrapper">
            <div id="search-results">search-results</div>
        </div>
    </div>
</div>

<强> CSS

#wrapper {
    display: table;
    width: 100%;
}

#nav-wrapper, 
#search-results-wrapper {
    float: left;
    width: 50%;
}

#nav, 
#search-results {
    color: #ffffff;
    background: #6699ff;
    padding: 10px;
    margin: 10px;
}

#nav-search-block {
    display: table-row-group;
}

#content-wrapper {
    display: table-footer-group;
}

#content {
    color: #ffffff;
    background: #cc0000;
    padding: 10px;
    margin: 10px;
}

Demo

Answer 2

现在你可以在javascript中执行此操作

就像这样

Javascript

document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;

<强> CSS

#content{
display:none;
}


#one{
background:red;
    padding:10px;
    clear:both;
}
#nav{
background:green;
    float:left;
    width:35%;
}
#search-results{
float:right;
    width:65%;
    background:yellow;
}

<强> HTML

<body>
  <div id="content">Content I m first in html </div>
  <div id="nav">navi</div>
  <div id="search-results">Search-Results</div>

    <div id="one"></div>
</body>

的 Live Demo 的

CSS - 让div首先出现在标记中，但显示在浮动的div下面

2 个答案: