我想了解在不同 div 类之间对齐不同大小类型的正确方法。现在，代码强制较小的类型与较大的类型的顶部对齐。如何将同一排版基线上所有 div 的类型与最干净的代码对齐。这似乎很容易，但我找不到答案。
我也希望这在语义上是正确的（我正在尝试创建一行具有响应性并且可以在不同设备上调整大小和重新排列（浮动）的数据）。欢迎所有建议。
问问题
1579 次
4 回答
0
听起来你需要 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 */
}
于 2013-08-24T21:56:38.637 回答
0
您需要调整每个字体大小的行高和可能的垂直边距，以便匹配基线网格。
我建议阅读：http ://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
于 2013-08-24T21:56:57.887 回答
0
通过填充和边距调整文本的放置位置。但是对于此设置，每个 div 的 ap 类使您可以控制要在 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>
于 2013-08-24T22:11:03.293 回答
0
我从这个 Stackoverflow 线程中找到了一个很好的答案：Why is vertical-align:text-top; 不能在 CSS 中工作。
它的要点如下：
- 了解块元素和内联元素之间的区别。块元素是类似的东西，
<div>而内联元素是类似的东西<p>or<span>。 - 现在，
vertical-align属性仅适用于内联元素。这就是为什么垂直对齐不起作用的原因。 - 使用 Chrome 开发工具，您可以修改您的演示并查看它是否有效：具体来说，在标签内部，使用适当的样式
<div>放置标签。<span>
于 2013-08-24T22:41:19.183 回答