日期、金额和总数的 CSS 对齐

Question

想要将右侧 3 行中的文本对齐，以便在最右侧的列中右对齐:金额/条目和与左侧列中的描述文本相同的字体大小(我已设置为 20，但输入的内容字段仍然很小)，并使 3 行的高度均匀。

不希望字段仅显示为文本输入字段。

• 保持红色和蓝色框不变。

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;
  font-size: 20px;
  font-weight: bold;
}

td:first-child {
  background-color: #e1e1e1;
  font-size: 20px;
  font-weight: bold;
}

<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>

Answer 1

不完全确定，但这是修改后的 css(您可以将其复制/粘贴到您的 jsfiddle 中进行检查):

body,
html {
  height: 100%;
}

#customer {
  overflow: hidden;
  background: yellow;
  height: 200px;
  display: flex;
  justify-content:center;
  align-items: center;
}

.container {
  order:1;
  flex-direction: column;

}

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

.space {
  flex-grow: 1;
}



#address-title {
  width: 450px;
  height: 20px;
  min-height: 20px;
  font-size: 20px;
  font-weight: bold;
  background: blue;
  display:flex;
}

img{order:2;}

#address-one {
  display:flex;
  width: 450px;
  height: 80px;
  min-height: 80px;
  font-size: 20px;
  font-weight: bold;
  background: red;
}

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

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

td:nth-child(1) {
  background-color: #e1e1e1;
}

td:nth-child(2) {
  background-color: green;
  width: 180px;
  text-align: right;
}

然后回答 flex 做什么的问题:它为 block 平均分配空间，而不知道它们的宽度。要获得更深入的文档，我推荐 css 技巧指南:csstricks guide to flexbox

希望对您有所帮助，祝您好运。