2

マークアップ内の div の順序が次のようでなければならない場合、純粋な CSS を使用して下の画像に示されているレイアウトを実現する方法はありますか?

注 - 各パネルの高さは不明です。ラッパー div をマークアップに追加できます

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

レイアウトパズル

4

2 に答える 2

1

この手法は、完全に流動的なレイアウトで CSS を使用して別の下に div を表示するという質問から取られてい ます。

これは、display: table ファミリのプロパティを使用した 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;
}​

デモ

于 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 に答える