css - 上方的 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 计算高度来固定布局。

更新:header 的高度不固定。

这个问题还有其他解决办法吗？一些“特殊标签”或 CSS 技巧？

更新:

我想我找到了什么。当您使用 float: left/right 时，父元素高度不会增长，然后“Section 1 - content”可以有 float: left 和“Section2 - content” 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>