html - "footer"div 中的响应式 h3 元素

Question

我正在尝试使用页眉、内容和页脚对我的页面进行“结果”划分。

页眉和内容都按我预期的方式工作，但我似乎无法让页脚中的 h3 元素在 div 上右对齐。如果我做;当我调整屏幕大小时它会中断。另一方面，result_header 似乎正常下降。

无 asp 的 html 标记如下。

   <div id="results">
          <div id="result_header">
            <h3>Tax Estimator Results</h3>
              <asp:Label AssociatedControlID="TugDropDown"
                runat="server" CssClass="tugLabel">
              <%=SrcTugList.Count %>  Taxing Unit Groups
              </asp:Label>
              <asp:DropDownList ID="TugDropDown"
                DataTextField="Desc"
                DataValueField="CodeID"
                runat="server" />
            </div>
            <!-- results go here, ignored since it's asp mostly -->
            <div id="result_footer">
            <h3> Total Estimate: </h3> <!-- This is what I want to right align/float on the right border of this div, it is not doing what I expect. -->
            </div>
        </div>


.tugLabel {
  color: #fff;
  display: inline;
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100px;
  right: 32%
}

#results select {
  width: 30%;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 2%;
  display: inline;
}

.tugResult{
  position: relative;
  padding: 5%;
  margin: 1%;
}

#result_footer {
  color: #fff;
  padding: 2%;
  position: relative;
  background-color: #9bc5ee;
}

#result_footer h3 {
  color: #fff;
  font-size: 1.3em;
  display: block;
  position: absolute;
  top: 2%;
  bottom: 2%;
  right: 5%;
  float: right;
}

Answer 1

我希望我能正确理解这个问题。您希望 h3 位于页脚 div 的右侧，对吗？ 与其将 h3 向右浮动，不如使用 text-align: right 怎么样？