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>