我想了解在不同div类之间对齐不同大小类型的正确方法。现在,代码强制较小的类型与较大类型的顶部对齐。如何使用最干净的代码在同一排版基线上的所有div上对齐类型。这看起来很简单,但我找不到答案。
我也希望这在语义上是正确的(我正在尝试创建一行响应的数据,并且可以在不同的设备上调整大小并重新排列(浮动))。欢迎所有建议。
答案 0 :(得分: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 */
}
答案 1 :(得分:0)
您需要调整每个字体大小的行高和可能的垂直边距,以便匹配基线网格。
我建议您阅读:http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
答案 2 :(得分:0)
使用填充和边距调整文本的放置位置。但是对于这个设置,每个div的p类让你可以控制你想要在div中放置文本。当然,由于你的字体数量很多,你的填充因基线偏移会有所不同。小提琴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>
答案 3 :(得分:0)
我从Stackoverflow主题中找到了一个很好的答案:Why is vertical-align:text-top; not working in CSS。
它的要点如下:
<div>
之类的内容,而内联元素是<p>
或<span>
之类的内容。vertical-align
属性仅适用于内联元素。这就是垂直对齐不起作用的原因。 <div>
标记内,将<span>
标记放入适当的样式。