Question

我似乎无法对齐彼此相邻的两列文字。第一列只有文本，而第二列有一个图像，然后在它下面的文本由于某种原因属于略微不同的行高，而不是与左边的文本保持平衡。

最好通过实际看到它来解释，但相关代码如下... 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
}

确保图像的高度（或其容器的高度）等于线高的倍数（即：22px）。

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

CAVEAT：这仅适用于您的列始终是固定宽度的情况，因为您可以在每个媒体查询断点处使图像成为精确高度。如果您的列是基于百分比的，并且可以在任何窗口宽度上变化，很遗憾，您将很难让文本在任何地方完美对齐。

一个常见的印刷技巧是使你的右栏更窄，并使段落格式不同（即：可能是更紧的行间距，更小的字体，更重的重量等）。这样做有两件事：它完全消除了对齐问题，并且它可以给两列的层次结构（即：左列是主列，右列是次列），这可能适合或不适合您的需要。

CSS响应comlumns - 对齐文本

1 个答案: