wordpress - CSS 响应列 - 对齐文本

Question

我似乎无法对齐彼此相邻的 2 列中的文本。第一列只有文本，而第二列有一个图像，然后是它下面的文本，由于某种原因，行高略有不同，并且与左侧的文本不平衡。

最好通过实际看到来解释，但相关代码在下面...... http://goo.gl/Jmq1uI

当我调整浏览器的大小时使其变小时，文本会对齐。我怎样才能让它始终对齐？

.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}

.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}

Answer 1

您需要根据排版比例来垂直调整事物的大小(想象水平线与每行文本的基线均匀对齐)。在你的例子中，你的段落行高是 22px。因此，我们将使用它作为我们的缩放比例，并根据它垂直调整所有内容:

使段落下方的边距等于行高:

p {
  line-height: 22px;
  margin-bottom: 22px; <---- was 20px
}

确保您的图像(或其容器的高度)等于行高的倍数(即:22 像素)。

img.aligncenter.size-full.wp-image-2803 {
 height: 396px; <------- 18*22, closest to natural rendered height
}

注意:这仅在您的列始终为固定宽度时有效，因为您可以使图像在每个媒体查询断点处具有精确的高度。如果您的列是基于百分比的，并且可以在任何窗口宽度下变化，不幸的是，您将很难让文本在任何地方都完美对齐。

一个常见的排版技巧是让右栏变窄，并以不同的方式呈现段落格式(即:可能更紧的行间距、更小的字体大小、更重的重量等)。这有两件事:它完全消除了您的对齐问题，并且它可以为两列提供层次感(即:左列是主要的，右列是次要的)，这可能适合也可能不适合您的需要。