<section>上方的HTML5 <header>和布局问题

Question

我想在HTML5 outliner（即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来计算修复布局的高度。

更新： 高度od标题不固定。

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

更新

我想我找到了一些东西。当你使用float：left / right然后父元素高度没有增长时，那么“第1节 - 内容”可以有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>

Answer 2

仅仅因为你使用绝对定位并不意味着你需要使用JavaScript来计算定位。 em单位在这里派上用场。

这里是您的HTML应用CSS，以使其显示您想要的方式。您可以在下面看到正在运行的输出。

＆＃13;

＆＃13;

 <!-- Background running -->
 <!-- Warning: changing this value to true may cause unexpected crashes if the
                application still try to draw after
                "applicationStateChanged(Qt::ApplicationSuspended)"
                signal is sent! -->
 <meta-data android:name="android.app.background_running" android:value="false"/>

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;