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：对吗？

“footer”div中的响应式h3元素

1 个答案: