垂直对齐顶部时，表格单元在多个屏幕尺寸上创建1px偏移

Question

我在使用50/50表格单元布局时出现问题 - 这是代码：

＆＃13;

＆＃13;

.table-wrapper {
  display: table;
  width: 100%;
  max-width: 1200px;
}
.table-cell {
  display: table-cell;
  vertical-align: top;
}
img {
  display: block;
  max-width: 100%;
}

＆＃13;

<div class="table-wrapper">
  <div class="table-cell">
    <img src="https://placeholdit.imgix.net/~text?  txtsize=66&txt=700%C3%97500&w=700&h=500">
    <h2>this is a test</h2>
  </div>
  <div class="table-cell">
    <img src="https://placeholdit.imgix.net/~text?  txtsize=66&txt=700%C3%97500&w=700&h=500">
    <h2>this is a test<br/>which is even longer</h2>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

为了更轻松地调整屏幕尺寸，我也将它放在codepen上。

问题是什么？

调整视口大小时，两个具有相同大小并垂直对齐的图像应该是合理的。但是在几个（奇数）屏幕尺寸上，它们会产生1px偏移（见截图）。哪种有意义，因为你只能使用整数将奇数像素值除以2。 但这看起来还不错。有没有人遇到过这个问题，可以共享解决方案吗？

Answer 1

被问题困扰 - 不知道如何在table布局中修复它。但我的解决方案是flexbox以下：

Flexbox解决方案：

将table显示替换为flexbox。看看它，让我知道你的反馈。谢谢！

.table-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px;
}

.table-cell {
  vertical-align: top;
}

img {
  display: block;
  max-width: 100%;
}

<div class="table-wrapper">
  <div class="table-cell">
    <img src="https://placeholdit.imgix.net/~text?  txtsize=66&txt=700%C3%97500&w=700&h=500">
    <h2>this is a test</h2>
  </div>
  <div class="table-cell">
    <img src="https://placeholdit.imgix.net/~text?  txtsize=66&txt=700%C3%97500&w=700&h=500">
    <h2>this is a test<br/>which is even longer</h2>
  </div>
</div>

另一种解决方案：

使用宽度为50％的inline-block和float：

.table-wrapper {
  display: table;
  width: 100%;
  max-width: 1200px;
}
.table-cell {
  display: inline-block;
  float: left;
  width: 50%;
  vertical-align: top;
}
.table-wrapper:after{
  content: '';
  display: block;
  clear: both
}
img {
  display: block;
  max-width: 100%;
}

<div class="table-wrapper">
  <div class="table-cell">
    <img src="https://placeholdit.imgix.net/~text?  txtsize=66&txt=700%C3%97500&w=700&h=500">
    <h2>this is a test</h2>
  </div>
  <div class="table-cell">
    <img src="https://placeholdit.imgix.net/~text?  txtsize=66&txt=700%C3%97500&w=700&h=500">
    <h2>this is a test<br/>which is even longer</h2>
  </div>
</div>

Answer 2

不确定，但我认为这应该是有效的

.table-cell img {
    display: block;
    max-width: 100%;
    height:auto;

}