时间戳

首页 > 解决方案 > 日期、金额和总计的 CSS 对齐方式

css - 日期、金额和总计的 CSS 对齐方式

问题描述

想要将右侧 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>

标签： css

解决方案

不完全确定，但这是修改后的 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 的作用：它为块平均分配空间，而不知道它们的宽度。对于更深入的文档，我推荐 css 技巧指南：csstricks guide to flexbox

希望它有所帮助，祝你好运。

推荐阅读