2

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

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

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

布局拼图

4

2 回答 2

1

此技术取自问题 Make a div display under another using CSS in a fully fluid layout。

它使用 CSS 表格展示，使用 display: table family 的属性来重新排列 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;
}​

演示

于 2012-11-23T04:35:15.447 回答
0

现在您可以在 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>

现场演示

于 2012-11-23T04:32:55.963 回答