将两个元素对齐到DIV的相对侧而不进行绝对定位

Question

我正在尝试制作包含两个元素的DIV，<h2>和<button>。它们应位于容器的两侧（左右）。我设法使用子元素的绝对位置来做到这一点：

#header2{
    position: relative;
    padding: 0.4em;
    color: white;
    background-color: #CC3333;
    min-height: 100px;
}

h2{
    position: absolute;
    display:inline;
}


#button{
    position: absolute;
    text-decoration: none;
    vertical-align: middle;
    padding: .1em;
    width:100px;
    height: 80%;
    margin-right: 5px;
    right: 0;
}

现在我发现当这些元素不适合较小的屏幕时会重叠。我理解这是由于绝对位置引起的，这使得这些元素忽略了布局流程。所以，我想要找到的是一种对齐两侧元素并保持div布局流程的方法，使其更加灵活。

Answer 1

一种方法是float他们。但请记住clear the floats。