html - 将两个元素与 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 .