html - 半 Angular 内联 block 元素导致奇怪的位置问题

Question

作为每日 UI 挑战 (#002) 的一部分，我制作了一个可以获取信用卡详细信息的小表格。我没有实现任何功能，只是设计。

这是我制作的表格:http://codepen.io/alanbuchanan/pen/vGZPBp

我的问题是关于表格的两个半 Angular 部分 - 失效日期和 CC 编号。

这里是相关代码——它针对包装两个表单元素的两个 div:

  div {
    display: inline-block;
    box-sizing: border-box;
    width: 45%;
  }

• 我将这两个部分包装在它们自己的 div 中，以便我可以更好地控制它们的位置。如果没有这些包装 div，是否可以将它们定位为半 Angular ？

• 在示例中，它们占据了 45% 的宽度，因为在 50% 时，第二个 div 溢出到下一行。

我只想给它 50%，让它占用一半的空间。还是不应该？

• 即使宽度为 45%，您也可以看到这两个 div 的高度之间存在大约 1px 的差异。

用Chrome Dev Tools检查后，我找不到这背后的问题。

对我的问题的任何回答或对这种情况的不同处理方法都将非常有用。

Answer 1

在大多数情况下，以下代码的设置可能是旨在创建 inline-block 列的最佳实践。

.column-container {
    font-size:0;
    line-height:0;
}
.column-container .column {
    display:inline-block;
    vertical-align:top;
    width:50%;
    font-size:16px;
    line-height:120%;
}

您可能想知道，为什么容器的font-size 和line-height 为零？

这经常被使用，因为一些 HTML 代码包含缩进代码，像这样:

<div class="column-container">
      <div class="column">text</div>

在这个例子中，您可以看到容器 div 在对列 div 编程之前包含空格/制表符。这些空格/制表符呈现为字符，因此它们将服从 css 告诉字符在该容器 div 中执行的任何操作。