时间戳

首页 > 解决方案 > 尝试在两个浮动 div 下方添加一条水平线

html - 尝试在两个浮动 div 下方添加一条水平线

问题描述

我试过查看堆栈溢出但找不到答案。无论如何，我正在尝试在两个浮动 div 下方添加一条水平线。水平线仅低于第一条，但不低于第二条。如果可行的话，我宁愿它们不是浮动的。他们只需要彼此保持一致。这是html

<h1 id="quoteSumTitle">Quote Summary</h1>
<h4 id="quotePriceText">Total cost "the quote price WIP"</h4>
<h5 id="CustomerTitle">Customer</h5>
<hr />
<div id="CustomerInfoInline" style="float:left">
    <section>
        <h6>Name: "insert"</h6>
        <h6>Address: "insert"</h6>
        <h6>City, State, Zip: "insert"</h6>
        <h6>SSN: "insert"</h6>
        <h6>DOB: "insert"</h6>
        <h6>Email: "insert"</h6>
        <h6>DOB: "insert"</h6>
        <h6>Prev. Carrier: "insert"</h6>

    </section>
    <hr id="hrBelowCustomer" />
</div>

<div id="CustomerDiscountsInline" style="float:right">
    <section>
        <h6 id="customerBold">Customer Discounts</h6>
        <h4 id="DiscountsID">discounts will be applied here</h4>
    </section>
    <hr />
</div>

和相应的CSS

#quoteSumTitle{
    text-align:center;
    margin-bottom: 60px
    
}
#quotePriceText{
    text-align:center;
    margin-bottom:40px
}
#CustomerTitle{
    color:lightslategray
}
#CustomerDiscountsInline{
    vertical-align:top;
    
}
hr {
    clear: left;
    clear:right
}
#hrBelowCustomer{
    top:500px;
}

标签： htmlcss

解决方案

您可以删除floats并改用，用一个 parentflex包装两者。你可以这样做：divsdiv

#quoteSumTitle{
    text-align:center;
    margin-bottom: 60px
    
}
#quotePriceText{
    text-align:center;
    margin-bottom:40px
}
#CustomerTitle{
    color:lightslategray
}
#CustomerDiscountsInline{
    vertical-align:top;
    
}
hr {
    clear: left;
    clear:right
}
#hrBelowCustomer{
    top:500px;
}

.info{
  display:flex;
  flex-direction:row;
  justify-content: space-between
}
<h1 id="quoteSumTitle">Quote Summary</h1>
<h4 id="quotePriceText">Total cost "the quote price WIP"</h4>
<h5 id="CustomerTitle">Customer</h5>
<hr />
<div class="info">
  <div id="CustomerInfoInline">
    <section>
      <h6>Name: "insert"</h6>
      <h6>Address: "insert"</h6>
      <h6>City, State, Zip: "insert"</h6>
      <h6>SSN: "insert"</h6>
      <h6>DOB: "insert"</h6>
      <h6>Email: "insert"</h6>
      <h6>DOB: "insert"</h6>
      <h6>Prev. Carrier: "insert"</h6>
    </section>
  </div>

  <div id="CustomerDiscountsInline">
    <section>
      <h6 id="customerBold">Customer Discounts</h6>
      <h4 id="DiscountsID">discounts will be applied here</h4>
    </section>
  </div>
</div>
<hr />

推荐阅读