HTML5 <header>

Question

我想在HTML5大綱實現這一結構（即HTML5 outliner）：

1. Section 1 - heading 
    1.1. Section 1 - content 
2. Section 2 

但問題是佈局：

HTML佈局可以是：

<section class="section1"> 
    <header>Some content for "Section 1 - heading"</header> 
    <article>Some content for "Section 1 - content"</article> 
</section> 
<section class="section2">Some content for "Section 2 - content"</section> 

到目前爲止，我可以看到2個解決方案：1.使「第1部分 - 標題」定位絕對，2.使「第2部分 - 內容」絕對定位。兩種解決方案都不好。我不想使用JavaScript來計算修正佈局的高度。

UPDATE： 高度od標頭不固定。

這個問題還有其他解決方案嗎？一些「特殊標籤」或CSS技巧？

UPDATE：

我想我發現了什麼。當您使用float：left/right時，父元素高度不會增長，那麼「第1部分 - 內容」可以有float: left和「第2部分 - 內容」float: right。工作示例：Example

Answer 1

Multiple ways to do this, easy way to work with layouts is bootstrap(http://getbootstrap.com/). I'd take a look at that, if not some simple css rules should get the layout you desire. 

.section1 header{ 
width:100%; 
height: 150px; //or whatever height you want it 
float:left; 
} 

.section1 article{ 
width: 70%; 
min-height:600px; //or some minimum height 
float:left; 

} 

.section2 
{ 
width:30%; 
min-height:600px; 
float:left; 
} 


or if you're using bootstrap do it this way: 

<div class="row"> 
<div class="col-lg-12"> 
My Content for the header goes here 
</div> 
</div> 

<div class="row"> 
<div class="col-lg-8"> Section One Content Goes here </div> 
<div class="col-lg-4"> section 2 stuff </div> 
</div> 

Answer 2

僅因爲您使用絕對定位並不意味着您需要使用JavaScript來計算定位。 em單位在這裏派上用場。

這裏是你的HTML應用CSS，使其顯示你想要的。您可以在下面看到運行輸出。

.wrapper { 
 
    margin-top: 1em; 
 
} 
 
section { 
 
    float: left; 
 
} 
 
.section1 { 
 
    height: 100px; 
 
    width: 300px; 
 
    background-color: lightblue; 
 
} 
 
.section2 { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: lightgreen; 
 
} 
 
.section1 > header { 
 
    position: absolute; 
 
    margin-top: -1em; 
 
    background-color: lightblue; 
 
    width: 500px; 
 
}

<div class="wrapper"> 
 
    <section class="section1"> 
 
    <header>Some content for "Section 1 - heading that's very long"</header> 
 
    <article>Some content for "Section 1 - content"</article> 
 
    </section> 
 
    <section class="section2">Some content for "Section 2 - content"</section> 
 
</div>