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的作用：它在不知道块的宽度的情况下平均分配块的空间。有关更深入的文档，我建议使用CSS技巧指南：csstricks guide to flexbox

希望有帮助，祝您好运。

日期，金额和总计的CSS对齐

1 个答案: