私は望んでいた結果(http://jsfiddle.net/jcx3X/40/)を得ましたが、なぜこれ(http://jsfiddle.net/jcx3X/41/)が機能しないのか不思議です。div
HTML の最初にリストされているものをフローティングする必要があるのはなぜですか?
1 に答える
0
これは、html がdom (ドキュメント オブジェクト モデル) 要素の順序を決定するためです。フローティングされていない要素は、順序によって異なる動作をします。
たぶん、この FIDDLEがあなたの探求に役立つでしょう。たまたま似たようなことをしているだけです。
HTML
<header class="global-header">
header
</header>
<div class="container">
<div class="column sidebar">
aside content fixed width
</div>
<div class="column page">
main content flexible width
</div>
</div> <!-- .container -->
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.global-header {
width: 100%;
float: left;
padding: 1rem;
}
.container {
width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
.column {
min-height: 100%;
padding: 1rem;
}
.page {
float: none; /* just to be clear */
background: #C0FFEE;
width: auto;
overflow: hidden;
}
.sidebar {
position: relative;
width: 20rem;
float: right;
background-color: #f06;
color: rgba(255,255,255,.8);
}
于 2013-06-02T02:47:47.610 に答える