CSS：在DIV底部放置纹理

Question

需要蓝色和黄色框位于黄色内的底部。换句话说，将它们向下移动。战斗了几个小时。

#customer { overflow: hidden; background: yellow;}
#address-title { width: 450px; height: 20px; font-size: 20px; font-weight: bold; float: left; background: blue;}
#address-one { width: 450px; height: 80px; font-size: 20px; font-weight: bold; float: left; background: red;}

HTML：

<div id="customer">

        <textarea name="address" id="address-title">Customer Invoices</textarea>
        <textarea name="address1" id="address-one"></textarea>
        <img src="images/green-plus.png" class="lookup-cust-plus" id="look"/>

        <table id="meta">
            <tr>
                <td class="meta-head">Invoice #</td>
                <td><textarea form ="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
            </tr>
            <tr>

                <td form ="testinsert" name="date" class="meta-head">Date</td>
                <td><textarea id="date">February 12, 1965</textarea></td>
            </tr>
            <tr>
                <td class="meta-head">Amount Due</td>
                <td><div class="due">$0.00</div></td>
            </tr>

        </table>

</div>

推荐结果：

Answer 1

最好在HTML中进行一些更改，并使用flex设置布局样式。

在我的解决方案中，我将您的布局分为customer元素下的3个元素。将客户设置为display:flex，以便轻松连续订购3个主要部分。每个专业将根据align-self属性放置自己。 flex-end会将元素放在容器的底部。

body,
html {
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-end;
  flex-grow: 4;
}

#look {
  margin: 0px 10px 0px 10px;
  align-self: center;
}

.space {
  flex-grow: 1;
}

#customer {
  overflow: hidden;
  background: yellow;
  display: flex;
  height: 140px;
}

#address-title {
  width: 450px;
  height: 20px;
  min-height: 20px;
  font-size: 20px;
  font-weight: bold;
  float: left;
  background: blue;
  align-self: flex-end;
}

#address-one {
  width: 450px;
  height: 80px;
  min-height: 80px;
  font-size: 20px;
  font-weight: bold;
  float: left;
  background: red;
  align-self: flex-end;
}

#meta {
  align-self: flex-end;
  flex-grow: 3;
}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

td:first-child {
  background-color: #e1e1e1;
}

<div id="customer">
  <div class="container">
    <div class="space"></div>
    <textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
    <textarea form="testinsert" name="address1" id="address-one"></textarea>
  </div>
  <img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
  <table id="meta">
    <tr>
      <td class="meta-head">Invoice #</td>
      <td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
    </tr>
    <tr>
      <td form="testinsert" name="date" class="meta-head">Date</td>
      <td><textarea id="date">February 12, 1965</textarea></td>
    </tr>
    <tr>
      <td class="meta-head">Amount Due</td>
      <td>
        <div class="due">$0.00</div>
      </td>
    </tr>
  </table>
</div>