我想了解在不同 div 类之间对齐不同尺寸类型的正确方法。现在，代码强制较小的类型与较大的类型的顶部对齐。如何将同一排版基线上所有 div 的类型与最干净的代码对齐。这看起来很简单，但我找不到答案。
我也希望这在语义上是正确的（我正在尝试创建一行响应式数据，并且可以在不同设备上调整大小和重新排列（浮动））。欢迎所有建议。
【问题讨论】：
我从这个 Stackoverflow 线程中找到了一个很好的答案：Why is vertical-align:text-top; not working in CSS。
它的要点如下：
<div>，而内联元素类似于<p> 或<span>。vertical-align 属性仅适用于内联元素。这就是为什么垂直对齐不起作用的原因。 <div> 标记内，以适当的样式放置 <span> 标记。【讨论】：
通过填充和边距调整文本的放置位置。但是对于此设置，为每个 div 设置一个 p 类可以让您控制您希望在 div 中放置文本的位置。当然，由于您的字体有多种 em 大小，因此您的填充会因基线偏移而有所不同。小提琴http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
【讨论】：
听起来您需要 CSS 的 line-height 属性。这样，您可以使文本行的高度相同，但分别影响font-size
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
【讨论】：
您需要调整每个字体大小的行高和可能的垂直边距，以匹配基线网格。
我建议您阅读以下内容：http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
【讨论】：